Как убрать белую полоску справа при верстке (на примере Bootstrap)

Снимок экрана 2015-11-01 в 23.33.55
При верстке на 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 😉

Posted in Web Dev and tagged , , , , , , , , , , , , .

5 Comments

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

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