CSS горизонтальные полосы прокрутки появляются в Chrome после изменения размера экрана браузера

Question

Уважаемые пользователи переполнения стека,

Я сейчас разрабатываю адаптивный веб-сайт.

У меня очень странная проблема с Google Chrome и браузером Android по умолчанию.

Появляется после изменения размера веб-сайта (Увеличение размера браузера по горизонтали или изменение горизонтальной ориентации на альбомную ориентацию на Android (более 480 пикселей)).

Когда я изменяю размер браузера до размера менее 480 пикселей, горизонтальная полоса прокруткиapears.

Убедитесь сами в (loco para saxo .com / new)

Answer 1

Проблема с вашим CSS. для navigation Вы пишете visibility: hidden; вместо display:none.

.moduletable_shop h3, #navigatie-horizontaal, .logo {
position: absolute;
width: 0;
height: 0;
display: none;
}

Причина написания display:none;, потому что visibility: hidden; скрывает элемент, но не удаляет элемент, а display:none удаляет элемент.

Answer 2

Грязный путь, но это работает.

body {
    overflow-x: hidden;
}

Answer 3

Как писал sandeep, это происходит потому, что вы используете visibility: hidden.Если вы хотите что-то скрыть, используйте display:none.Согласно w3schools-docs, visibility: hidden это:

Элемент невидим (но все еще занимает место)