Блог

Главная - Вопросы по программированию - Css, нежелательная горизонтальная прокрутка на мобильных устройствах

Css, нежелательная горизонтальная прокрутка на мобильных устройствах

#html #css #flexbox #overflow

#HTML #css #flexbox #переполнение

Вопрос:

Я столкнулся с небольшой проблемой, по какой-то причине я вижу огромный белый пробел слева от <html> тега

Я попытался добавить HTML и тег body для этого правила:

overflow-x: hidden;
max-width: 100vw;

Это работает на рабочем столе (даже если я изменяю размер окна браузера), но это не помогло на мобильных устройствах (это не помогло в мобильном режиме в chrome dev tools).

В чем может быть проблема? Я думаю, это как-то связано с тем, что css сайта в основном использует flexbox.

также я подозреваю, что это как-то связано с div, выделенным красным цветом на картинке (положение которого фиксировано, но по какой-то причине появляется после прокрутки вниз).

Это правило div css

 .contact-mobile{
    position: fixed !important;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 15px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 100vw;
    background-color: $black;
    opacity: 0.9;

    a{
        min-width: 25%;
        text-align: center;
        padding: 5px;
        i{
            color: #fff;
        }
        amp;:hover{
            opacity: 1;
            i{
                color: $black;
            }
            background-color: $green;

        }
    }
}

это сайт разработчика http://davdev.co.il/broker
это уменьшение того, что я вижу
https://www.screencast.com/t/P7zQwdWySBv

введите описание изображения здесь

Комментарии:

1. попробуйте overflow-y:hidden; вместо overflow-x:hidden; because overflow-x — горизонтальная полоса прокрутки, а overflow-y вертикальная

2. Извините, я написал вертикальную вместо горизонтальной, у меня нежелательный горизонтальный пробел. Я написал overflow-x: hidden; но я все еще вижу пробел в мобильном представлении

3. ах, ладно, имеет смысл

Ответ №1:

Проблема связана с вашей позицией iframe,

Поместите top: -5000px вместо left: -5000px , и это исправит пробел на мобильных устройствах