Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?

Question

[Владимир Мирошник]

Сайт laptevcourse.ru

Где-то полгода не верстал, уверен, что что-то забыл совсем маленькое и глупое.

На мобильном есть горизонтальная прокрутка (айфон)

Оверфлоу включен:

body,html {
  overflow-x: hidden !important;
}

Мета-тег для мобильных есть:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Очень сильно туплю, подскажите, пожалуйста.

Comments

[godsplan]

нет прокрутки....

[godsplan]

возможно ты столкнулся с "багом" при ресайзе сайта через хром девтулс. можешь добавить в мета вьюпорт maximum-scale=1

[Виталий Першин]

godsplane, Прокрутка есть, это не баг, это верстка кривая

[Ankhena]

Оверфлоу включен:

Это не поможет.
Во-первых, потому что не работает на мобилках.
Во-вторых, потому что это дурацкий костыль и надо чинить верстку.

Если вдруг действительно нужно, чтобы что-то выходило за вьюпорт, то overflow вешается на на весь body и не на обертку всего сайта, а на ближайшего родителя с подходящей шириной.
Но в данном случае, придется действительно обернуть именно всё содержимое оберткой с overflow, потому что картинка позиционируется относительно него.

p.s. зачем текст абсолютом?

Answer 1

[Виталий Першин]

header img имеет абсолютное позиционирование в то время как сам header имеет позиционирование по умолчанию static, соответственно header img вырывается из потока и позиционируется относительно родителя, в данном случае body. Сам мо себе body и html нельзя ограничить по ширине, если внутри есть элементы выходящие за пределы окна то body,html { overflow-x: hidden !important; } не поможет. Вообще лучше всегда делать обертку всего сайта внутри body и тогда будет работать overflow-x: hidden. Но в данной верстке надо бы и header сделать правильно, так как сейчас это пустышка с нулевой высотой.