AlekseyLego 0 Жалоба Опубликовано: March 24, 2021 Заметил неприятную особенность шаблона Realia. При уменьшении ширины окна, сначала пропадают контакты в шапке, потом пропадает кнопка добавления объекта, а следом исчезает слоган. То есть, получается, что при ширине 767px и менее (а это все телефоны -- 50+% трафика!), контакты телефона агентства не показываются пользователю. В прикреплённых файлах примеры с размерами. Вопрос: как сделать так, что бы телефон оставался в шапке всегда (при любой ширине!), слоган держался до последнего, а кнопка и емейл изчезали в первую очередь? Буду благодарен, если дадите кусок CSS, так как моих мозгов разобраться в нём самостоятельно, не хватает. Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
Дмитрий Кондин 690 Жалоба Опубликовано: March 25, 2021 Это называется адаптивность. Можете в стилях подкорректировать видимость элементов как вам нужно /template/frontend/realia/css/realia-blue.css @media ( -webkit-min-device-pixel-ratio : 2) , ( -moz-min-device-pixel-ratio : 2) { #header-wrapper #header #header-inner .navbar .navbar-inner .site-phone span { background-image: url("../img/icons/phone-gray@2x.png") } #header-wrapper #header #header-inner .navbar .navbar-inner .site-email a { background-image: url("../img/icons/mail-gray@2x.png") } } @media ( min-width : 1200px) { #header-wrapper #header #header-inner .navbar .navbar-inner .info { float: none; padding-top: 0px } #header-wrapper #header #header-inner .navbar .navbar-inner .site-phone { float: left; line-height: 90px; margin-left: 40px } #header-wrapper #header #header-inner .navbar .navbar-inner .site-email { float: left; line-height: 90px; margin-left: 40px } } @media ( max-width : 1199px) { #header-wrapper #header #header-inner .navbar .navbar-inner .info { float: left; margin-left: 40px; padding-top: 12px } #header-wrapper #header #header-inner .navbar .navbar-inner .site-phone { float: none; line-height: 30px; margin-left: 0px } #header-wrapper #header #header-inner .navbar .navbar-inner .site-phone span { font-size: 16px; padding-top: 1px; padding-bottom: 1px } #header-wrapper #header #header-inner .navbar .navbar-inner .site-email { float: none; line-height: 30px; margin-left: 0px } #header-wrapper #header #header-inner .navbar .navbar-inner .site-email a { font-size: 16px } #header-wrapper #header #header-inner .navbar .navbar-inner .site-search input { width: 186px } #header-wrapper #header #header-inner .navbar .navbar-inner .site-search button { margin: 0px 0px 0px -9px } } @media ( max-width : 979px) { #header-wrapper #header #header-inner .navbar .navbar-inner .logo-wrapper { width: auto } #header-wrapper #header #header-inner .navbar .navbar-inner .info { display: none } } @media ( max-width : 767px) { #header-wrapper #header #header-inner .navbar .navbar-inner { padding-left: 20px; padding-right: 20px } #header-wrapper #header #header-inner .navbar .navbar-inner .site-slogan { display: none } #header-wrapper #header #header-inner .navbar .navbar-inner .site-search { display: none } #header-wrapper #header #header-inner .navbar .navbar-inner .list-your-property { display: none } } Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах