При верстці на Bootstrap (я підозрюю, що ця стаття може бути застосована і для верстки без нього) нерідко трапляється таке, що праворуч від контенту з’являється біла смуга без видимих на те причин. Вроді нічого страшного, але до кінця позбутися від неї не так то просто.
У загальному випадку досить прописати в CSS приховування overflow в тілі документа.
body {
overflow-x: hidden !important;
}
І це вирішить проблему, але тільки для десктопних браузерів.
Якщо відкрити цю ж сторінку з під safari на ios так чи взагалі з будь-якого браузера мобільних пристроїв (Android, Windows Phone, Chrome і т.д.) – то проблема залишиться!
Так у чому ж справа?
Справа в тому, що мобільні пристрої вирішують що робити з body посилаючись на viewport.
Звідси виникає питання «Як же тоді приховати цю білу смугу?».
Досить огорнути весь контент ще одним div’ом і задати йому той же CSS стиль, що ми прописали вище для тега body.
HTML:
<head>…</head>
<body>
<div class=”wraperrr”>
…
</div>
</body>
CSS:
.wrapperrr {
overflow-x: hidden !important;
}
Думаю, що таким простим способом і Вам вдасть позбутись цієї білої смуги на мобільних девайсах.
