Часто бывает так, что на мобильной версии сайта при просмотре на телефоне справа появляется непонятный отступ с белым фоном:
Вроде и body и html при просмотре через webtools при наведении на них находятся в границах сайта, а отступ этот все равно находится за пределами body/html.
Как правило, все дело во внутренних отступах, а именно в padding’ах дочерних элементов. В случае, если div имеет следующие свойства:
|
1 2 3 4 |
div { width: 400px; padding: 0 30px; } |
а контент в нем, например, <img /> имеет ширину 390px, то конечная ширина родительского div будет равна 450px…поэтому в случае если у вас наблюдается та же проблема – проверьте все внутренние отступы ваших элементов и вероятно где-то глубоко-глубоко найдете предательский padding 🙂
Чтоб такой штуки не было, можно использовать
* {
/* Делает падинги отступами внутрь родительского элемента */
box-sizing: border-box;
}
Ну и чтоб наверняка
img {
max-width: 100%;
}
Долгих лет жизни тебе)
Поможет:
* max-width: 100% ;
это не совсем правильно ( хотя спорно если подразумевать как глобальную политику свойств элементов ), но если сложно отыскать нужный элемент, у которого содержимое выходит за границы 100% ( либо текст, или padding или все что угодно )
БлагоДарю за дополнение!
Если в верстке есть контейнер что все оборачивает, дать overflow: hidden; на эту обертку и все должно хорошо.
Но важно проверить чтобы контент не обрезался в спойлерах, модальных окнах и т.д.
Есть такой вариант.
Спасибо брат профитов тебе
Благодарю!