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

[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://opencart-forum.ru/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://opencart-forum.ru/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/

 

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