[Решено] Сдвигаются контакты в шапке

[Serg86]

Добрый день! Помогите пожалуйста, когда я добавляю в шапку телефон, то вроде все нормально, но когда я изменяю масштаб страницы, то телефон сдвигается. Ниже приведу фрагменты кода который я добавил:

в header.

<div class="header-contacts">
		<div class="header-contacts__phone1">+7 (343) 382-37-63</div>
		<div class="header-contacts__phone2">+7 (343) 328-96-99</div>
      </div>

в stylesheet

.header-contacts {position:absolute; top:105px; right:0;background:url(../header_phone.png) no-repeat 0 50%;}

.header-contacts__phone1 {display:inline-block; vertical-align:top; *display:inline; zoom:1; font:bold italic 26px/1 'Roboto Regular', arial; padding:0 0 0 38px;  margin:6px 66px 0 0; color:#7f2900; }
.header-contacts__phone2 {vertical-align:top; *display:inline; zoom:1; font:bold italic 26px/1 'Roboto Regular', arial; padding:0 0 0 38px;  margin:6px 66px 0 0; color:#7f2900; }

Версия ocStore 2.1.0.2. 

Заранее благодарен.

[Serg86]

Спасибо за ответ, но я не совсем понял куда добавлять... и если Вас не затруднит, то поясните, что это значит. Я только начинаю осваивать opencart.  

[Serg86]

Понял, спасибо:) Видимо придется изучить.

[l1key]

у меня похожая ситуация, но смещается не только контакты а и форма поиска, она должна накладываться на основное меню справа но при смене размера логотипа в шапке естественно остается на месте.

подскажите как ее подстроить под размер лого в шапке .

спасибо.

[hoolygan]

судя по фото - она у Вас имеет абсолютное позиционирование, а нужно тогда внести ее в див менюшки и делать позицию относительно ее. Без ссылки больше сказать не смогу.

[l1key]

судя по фото - она у Вас имеет абсолютное позиционирование, а нужно тогда внести ее в див менюшки и делать позицию относительно ее. Без ссылки больше сказать не смогу.

Спасибо да стоял Абсолют.. Сделал. Relative и поправил позицию ... Заодно освоил Mozilla fairbag ))) крутая штука..

Правда вот с container не совсем разобрался .. Пляшут туда сюда)) структуру нужно уловить.

[Serg86]

Еще вопрос по теме, теперь контакты не сдвигаются, но в мобильной версии "заплывают" на логотип. Можно ли выключить их вывод в мобильной версии или как-то подкорректировать. Спасибо!

[Serg86]

 

например так

@media (max-width: 991px) and (min-width: 768px){
.header-contacts { 
display: none!important;
}
}

 

Спасибо! При определенном разрешении экрана пропадают контакты, а в мобильном опять появляются. Взгляните, правильно ли я делаю:

<div class="header-contacts col-sm-6">
	 <span>
		<div class="header-contacts__phone1">+7 (343) 382-37-63</div>
		<div class="header-contacts__phone2">+7 (343) 328-96-99</div>
	</span>
      </div>

и в CSS как Вы сказали.

[Serg86]

@media (max-width: 991px) and (min-width: 768px){

тут указан диапазон разрешений, я думал Вы поняли это...видимо нет

рекомендую прочесть статью, там доступным и понятным языком описывается что куда и как

 

 

@media (max-width: 991px) and (min-width: 768px){

тут указан диапазон разрешений, я думал Вы поняли это...видимо нет

рекомендую прочесть статью, там доступным и понятным языком описывается что куда и как

 

Спасибо, орошая статья.  У меня получилось))

[Serg86]

Чтобы не плодить темы, спрошу тут. Как можно скрыть в мобильной версии информацию, которая выведена в на главную с помощью HTML модуля.  Не могу найти нужный блок... 

[hoolygan]

смотрим каким дивом она (инфа) выводится, и скрываем медиазапросом, По другому ну никак вообще.

[Serg86]

смотрим каким дивом она (инфа) выводится, и скрываем медиазапросом, По другому ну никак вообще.

Я понимаю это, но не могу div соответсвующий найти(