Отступ справа от сайта (белый фон) на мобильных устройствах

Часто бывает так, что на мобильной версии сайта при просмотре на телефоне справа появляется непонятный отступ с белым фоном:

padding

Вроде и body и html при просмотре через webtools при наведении на них находятся в границах сайта, а отступ этот все равно находится за пределами body/html.

Как правило, все дело во внутренних отступах, а именно в padding’ах дочерних элементов. В случае, если div имеет следующие свойства:

а контент в нем, например, <img /> имеет ширину 390px, то конечная ширина родительского div будет равна 450px…поэтому в случае если у вас наблюдается та же проблема — проверьте все внутренние отступы ваших элементов и вероятно где-то глубоко-глубоко найдете предательский padding 🙂

5 комментариев

  1. Роман

    Чтоб такой штуки не было, можно использовать

    * {
    /* Делает падинги отступами внутрь родительского элемента */
    box-sizing: border-box;
    }

    Ну и чтоб наверняка
    img {
    max-width: 100%;
    }

  2. OAV

    Поможет:
    * max-width: 100% ;

    это не совсем правильно ( хотя спорно если подразумевать как глобальную политику свойств элементов ), но если сложно отыскать нужный элемент, у которого содержимое выходит за границы 100% ( либо текст, или padding или все что угодно )

  3. Саша

    Если в верстке есть контейнер что все оборачивает, дать overflow: hidden; на эту обертку и все должно хорошо.
    Но важно проверить чтобы контент не обрезался в спойлерах, модальных окнах и т.д.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *