AlekseyLego

name="viewport" и контакты в шапке сайта

Recommended Posts

334891656_vievport4.jpg.fa3cf7372d39a384b862cf8866e2a0d6.jpg

 

Заметил неприятную особенность шаблона Realia.

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

То есть, получается, что при ширине 767px и менее (а это все телефоны -- 50+% трафика!), контакты телефона агентства не показываются пользователю.

В прикреплённых файлах примеры с размерами.

Вопрос: как сделать так, что бы телефон оставался в шапке всегда (при любой ширине!), слоган держался до последнего, а кнопка и емейл изчезали в первую очередь?

Буду благодарен, если дадите кусок CSS, так как моих мозгов разобраться в нём самостоятельно, не хватает.

Шапка сайта и vievport 1.jpg

Шапка сайта и vievport 2.jpg

Шапка сайта и vievport 3.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Это называется адаптивность.

Можете в стилях подкорректировать видимость элементов как вам нужно

/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
	}
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас