Question

Как прописать условие что бы в разных разрешениях был разный head-l ?

В частности в полном разрешении меня устраивает текст, как есть, а для разрешений поменьше хочу чтобы появлялся логотип.

Answer 1

Примерно так:

@media screen and (min-width: 240px) and (max-width: 650px) { #site-logo {float:left;width:64px!important;height:64px!important;background:url('http://cdn.formidapps.com/icon/xwEFqztF-64.cs.jpg')no-repeat!important;} .site-n {display:none; }}

вместо фото http://cdn.formidapps.com/icon/xwEFqztF-64.cs.jpg пропишите свое размерами 64х64. Разрешение от 240 по 650 настройте под себя. Это минимальное резрешение при котором будет скрыто текстовое лого и показано фото лого.

Comments

Yuri_Geruk,

<header>

 <div class="wrapper">
 <div id="header">
 <div class="head-l">
 <a href="$HOME_PAGE_LINK$" title="Home"><div id="site-logo"><span class="site-l"><span class="site-n"><!-- <logo> -->TERRA-PRO<!-- </logo> --></span></span></div></a>
</div> 
 <div class="head-r" style="text-align: center;">
<font style=""><a href="tel:+380442296807" ><font color="#f27935">044</font>&nbsp;229-68-07</a>&nbsp; &nbsp;</font><a href="tel:+380988321757" style="text-align: center;"><span style="color: rgb(242, 121, 53);">098</span>&nbsp;832-17-57</a></div><div class="head-r" style="text-align: center;"><a href="tel:+380636709407"><font color="#f27935">063</font><span style="color: rgb(255, 165, 0);">&nbsp;</span>670-94-07</a>&nbsp; &nbsp;<a href="tel:+380664381807"><font color="#f27935">066</font>&nbsp;438-18-07</a></div>
 <div class="clr"></div>
 <nav>
 <div id="catmenu">
 <!-- <sblock_nmenu> -->
<?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>
<!-- </sblock_nmenu> -->
 <div class="clr"></div> 
 </div>
 </nav>
 <div class="clr"></div>
 </div>
 </div>
 <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-127423209-1"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'UA-127423209-1');
</script>
</header>

---

Дима Липилин,

Поправил ваш код, сделайте так.

---

Yuri_Geruk,

Спасибо! То что нужно!

---

Yuri_Geruk,

Упс, заметил ещё один нюанс!

При спользовании этого кода, перестаёт анимироваться текст site-logo при полноэкранном режиме.

Можно как-то доработать код?

---

Дима Липилин,

Дмитрий, за доработкой обращайтесь к ребятам https://upartner.pro или https://divly.ru/