При верстке на Bootstrap (я подозреваю, что эта статья применима и к верстке без него) нередко случается такое, что справа от контента появляется белая полоса без видимых на то причин.
Почти на всех страницах, что я верстал с этим фреймворком она появилась.
И всё бы ничего, но до конца избавиться от неё не так то просто.
В общем случае достаточно прописать в CSS скрытие overflow в теле документа.
body {
overflow-x: hidden !important;
}
И это решит проблему, но только для десктопных браузеров.
Если открыть эту же страницу из под safari на ios да или вообще с любого браузера мобильных устройств (Android, Windows Phone, Chrome и т.д.) — то проблема останется!
Так в чём же дело?
Дело в том, что мобильные устройства решают что делать с body ссылаясь на viewport.
«Как же тогда скрыть эту полоску?» спросите вы.
Достаточно обрамить весь контент еще одним div’ом и задать ему то же свойство, что мы и рассмотрели выше.
HTML:
<head>…</head>
<body>
<div class=»wraperrr»>
…
</div>
</body>
CSS:
.wrapperrr {
overflow-x: hidden !important;
}
Данную информацию я также изложил в видео скринкасте, хочу попробовать новый формат. Надеюсь вам будет интересно не только почитать, но и посмотреть+послушать.
Подписывайтесь на мой канал на YouTube 😉
Спасибо тебе чувак!
Крутой совет- очень помог
спасибо за совет
Как же просто-то в итоге! А так долго мучалась
Наконец-то хоть кто-то дельный совет по этой подлой трабле дал! Спасибо большое!
Спасибо! Огромное спасибо! Мучениям пришел конец!