为什么移动设备中网站右侧有空白

Question

为什么我的移动网站显示屏右侧有一个空白？像这样我的错误屏幕显示在这里，这是我的实时链接

我请求你的帮助并感谢你：(

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

导致问题的原因是顶部容器中的.bottomcloud。

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

它有一个位置：绝对，位置在视口之外，导致视口展开。

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