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

Как при этом выравнять его центру?

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

 <div id="site-logo"><span class="site-l"><span class="site-n"><a href="$HOME_PAGE_LINK$" title="Home"><!-- <logo> --><img src="/terra-pro_arranged.svg" width="200" height="130" <!-- </logo></a></span></span></div>

---

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

Внутрь условия дописать что-то подобное:

#site-logo img {margin:0 auto;display:table;}

---

Yuri_Geruk,

Удалось загнать его на середину вот так,

#site-logo {float:none; margin: auto; width:200px!important;height:130px!important;background:url('/terra-pro_arranged.svg')no-repeat!important;} .site-n {display:none; }

Но проблема с размером, видимо из-за svg, формата, подскажите как исправить?

 

---

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

Сделайте фото в png формате и размерами меньше.

---

Yuri_Geruk,

Но я хочу svg, чтобы не терялось качество при любых разрешениях!

---

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

Попробуйте в стилях строку номер 502 заменить на следующие стили:

#site-logo {float: none;margin: auto;width:409px!important;height:249px!important;background-image: url(/terra-pro_arranged.svg);} .site-n {display:none; }

---

Yuri_Geruk,

Спасибо,  так я тоже пробовал, но получается не то что хотелось. Логотип выходит слишком большим и не масштабируется. Может существует какой-то другой метод реализации задачи?

---

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

Вероятно вы кеш после этого не чистили, проверял через инспектор браузера, подстраивался под разрешение. Если вам так не подходит, тогда ищите лучшее решение, как пример прочтите https://ruseller.com/lessons.php?id=2077&rub=2

---

Yuri_Geruk,

Спасибо, в основном Вы мне помогли, удалось реализовать задуманное)  Единственное - можно теперь логотип сделать кликабельным, тоесть чтобы он был ссылкой?

---

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

Покажите код с глобального блока верхняя часть сайта.

---

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/