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

[AlekseyLego 0]

 

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

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

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

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

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

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

[Дмитрий Кондин 690]

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

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

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