Как зафиксировать сайт, чтобы он не скролился пальцем вправо-влево на телефоне, оголяя белый фон?

Question

[petrfedorav]

Сделал простой сайт лендинг. Он адаптивный и нормально работает на любых экранах.

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

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

Answer 1

[Александр Севиринов]

Видимо какой то элемент имеет отрицательное горизонтальное значение.
Два варианта решения:

1. найти этот элемент и исправить
   
2. добавить родителю с элементов который выходит за грани CSS overflow-x: hidden; или, если не удается найти/исправить вышеуказанный элемент, добавить это правило в body
   

Answer 2

[Сергей]

body, html{
  max-width: 100%;
}

Если все таки что то вылазает, можно попробовать 100vw

По предложению KorniloFF можно еще добавить

body, html {
  overflow-x: hidden;
}

Comments

[Павел Корнилов]

+
overflow:hidden

[Илья]

Спасибо, помогло.

[Arsen06]

Спасибо большое!!!

[Анна]

Спасибо тебе, добрый волшебник Сергей!