为什么在移动设备中网站右侧有一个空白区域

Question

Why is there an empty white space on the right side of my mobile website display? like this my error screeenshot here and this is my live link

I beg for your help and thank you :)

Answer 1

its your .bottom-cloud in the top-container what causes the issue.

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

it has a position:absolute with position out of the viewport which causes the viewport expanding.

Add an overflow:hidden to the top-container and it wont expand it.

Answer 2

You have issue in awan.png image. This image is absolute position for Mobile and Desktop. In smaller screen this image showing in outside of .top-container . You have two option to fix this issue.

Option 1

Using @media for mobile devices. You no need to use this cloud image for mobile devices.

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

Option 2

Make top-container class overflow hidden.

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

Hope this help!.