为什么移动设备的网站右侧有一个空白答案

【问题标题】：Why There is A White space on right side of website in Mobile devices为什么移动设备的网站右侧有一个空白
【发布时间】：2020-07-05 01:39:06
【问题描述】：

为什么我的移动网站显示右侧有一个空白区域？像这样my error screeenshot here 这是我的live link

我请求你的帮助，谢谢你:)

【问题讨论】：

【解决方案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;
}

希望对您有所帮助！

【讨论】：

【解决方案2】：

它是您在顶级容器中的 .bottom-cloud 导致问题的原因。

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

它有一个 position:absolute ，它的位置超出了视口，导致视口扩大。

添加一个溢出：隐藏到顶部容器，它不会扩展它。

【讨论】：