Почему в мобильных устройствах есть пустое пространство на правой стороне сайта?

Question

Почему справа от моего мобильного веб-сайта есть пустое пространство? вот так мой скриншот ошибки здесь и это моя живая ссылка

Прошу вас о помощи и спасибо :)) 1007 *

Answer 1

У вас проблема с awan.png изображением. Это изображение absolute для мобильных и настольных ПК. На меньшем экране это изображение отображается за пределами .top-container. У вас есть два варианта решения этой проблемы.

Опция 1

Использование @media для мобильных устройств. Вам не нужно использовать это облачное изображение для мобильных устройств.

@media (max-width: 767px){
    .bottom-cloud{
        display: none;
    }
}

Опция 2

Сделать переполнение класса top-container скрытым.

.top-container{
    position: relative;
    padding-top: 100px;
    background-color: var(--biru-muda);
    overflow: hidden;
}

Надеюсь, это поможет!

Answer 2

это ваше .bottom-облако в верхнем контейнере, которое вызывает проблему.

<img class="bottom-cloud" src="img/awan.png" alt="">

у него есть позиция: абсолютная с позицией вне области просмотра, которая вызывает расширение области просмотра.

Добавьте переполнение: скрыто в верхний контейнер, и оно не будет расширяться.