[РЕШЕНО] Как зафиксировать контакты в шапке?

[hipimps]

Здравствуйте! Столкнулся с небольшой проблемой. Добавил в шапку контакты и кнопку, css контактов привожу ниже. На скринах видно, что когда сайт открыт на весь экран, то все отображается как надо. Но в окне или если просматривать через смартфон - контакты сохраняют отступ от правого края и едут.

Вопрос: Как их зафиксировать?

 

И еще одно, слайдер сохраняет отступ от левого края, при изменении размера окна и при просмотре через смартфон. Тоже не разобрался почему.

.header_text {

position: absolute;

top: 35px;

right: 350px;

font-size: 12pt;

font-family: verdana;

font-style: italic;

color: #333;

border: 3px dashed #CD0000;

padding: 10px;

}

div.header_tut a {

position: absolute;

top: 55px;

right: 700px;

font-size: 12pt;

font-family: verdana;

font-style: italic;

color: #333;

border: 3px outset #CD0000;

padding: 10px;

}

.header_adr {

background: url('../image/adres.png') no-repeat left center;

padding-left: 40px;

}

div.header_phone a  {

background: url('../image/phone.png') no-repeat left center;

padding-left: 40px;

font-size: 12pt;

font-family: verdana;

font-style: italic;

}

[RodgerFox]

вы понимаете что ширина сайта на мобильных меньше? и почему решили использовать абсолютное позиционирование? 

да и забейте вы на эту проблему, человеку все равно придется увеличивать контент, что бы что то разобрать. увеличит увидит кнопку.. все норм. 

но как решение могу порекомендовать ознакомиться с идеей "сначала мобильные" и расположить блоки в порядке слева направо (лого, кнопка, контактики), примерно...

a.logo + a.top-contacs-b + div.phones со стилями:

display: inline-block; vertical-align: middle; 

если последние два элемента расположить по правую сторону, юзаем флоат или оборачиваем в спасительный див с text-align: right; аминь

[pashast]

.header_text {

/* position: absolute; */
/* top: 35px; */
/* right: 350px; */
font-size: 12pt;
font-family: verdana;
font-style: italic;
color: #333;
border: 3px dashed #CD0000;
padding: 10px;
max-width: 290px;
float: right;
}

div.header_tut a {

/* position: absolute; */
/* top: 55px; */
/* right: 700px; */
font-size: 12pt;
font-family: verdana;
font-style: italic;
color: #333;
border: 3px outset #CD0000;
padding: 10px;
float: right;
margin: 20px;
}

Не задавайте абсолотное позиционирование в блоках с респонсив дизайном и все будет ок.

[hipimps]

вы понимаете что ширина сайта на мобильных меньше? и почему решили использовать абсолютное позиционирование? 

да и забейте вы на эту проблему, человеку все равно придется увеличивать контент, что бы что то разобрать. увеличит увидит кнопку.. все норм. 

но как решение могу порекомендовать ознакомиться с идеей "сначала мобильные" и расположить блоки в порядке слева направо (лого, кнопка, контактики), примерно...

a.logo + a.top-contacs-b + div.phones со стилями:

display: inline-block; vertical-align: middle; 

если последние два элемента расположить по правую сторону, юзаем флоат или оборачиваем в спасительный див с text-align: right; аминь

 

По правде сказать, я взял этот код из урока. 

 

.header_text {

/* position: absolute; */
/* top: 35px; */
/* right: 350px; */
font-size: 12pt;
font-family: verdana;
font-style: italic;
color: #333;
border: 3px dashed #CD0000;
padding: 10px;
max-width: 290px;
float: right;
}

div.header_tut a {

/* position: absolute; */
/* top: 55px; */
/* right: 700px; */
font-size: 12pt;
font-family: verdana;
font-style: italic;
color: #333;
border: 3px outset #CD0000;
padding: 10px;
float: right;
margin: 20px;
}

Не задавайте абсолотное позиционирование в блоках с респонсив дизайном и все будет ок.

 

Спасибо, теперь стало намного лучше. На самом деле, я пытался вообще избавиться от адаптивности по многочисленным примерам, в итоге "помогло" удаление responsive.css. Скорее всего это в корне не верное решение, но под мобильную версию шаблон перестраиваться перестал. Видимо где-то еще что-то нужно почистить. Слайдер тоже может ехать по этой причине?

[pashast]

Отключить адаптивность в шаблонах на бутстрапе не так просто, можете глянуть эту тему

 

https://opencartforum.com/topic/47310-%D0%BE%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D0%BC-%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%B2-opencart-20/

[hipimps]

Отключить адаптивность в шаблонах на бутстрапе не так просто, можете глянуть эту тему

 

https://opencartforum.com/topic/47310-%D0%BE%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D0%BC-%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%B2-opencart-20/

 

Спасибо, справился с проблемой, убрал адаптивность.