為什么在移動設備中網站右側有一個空白區域

Question

為什么我的移動網站顯示右側有一個空白區域？ 像這樣我的錯誤截圖在這里，這是我的 實時鏈接

我請求你的幫助，謝謝你:)

Answer 1

它是頂部容器中的 .bottom-cloud 導致問題的原因。

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

它有一個位置：絕對，位置在視口之外，導致視口擴展。

添加一個溢出：隱藏到頂部容器，它不會擴展它。

Answer 2

您在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;
}

希望這有幫助！。