White space on the right

Solved. Thank you! :)

Hey Minyi, could you show me how to replicate your problem?
It all seems fine on my side.

The extra space to the right is from your entrance interactions coming in right to left.
That’s why you can scroll right when the page just loads, but after your last content animates in (Spotify), you can’t scroll right anymore.

A simple fix would be to set your body’s Overflow property to hidden.
image

A more correct way would be to set the container boxes of your content to have the Overflow property of hidden.

Solved. Thank you! :)

Div Block 60 has a Min Width of 500px on mobile. You need to change that.

Try just setting your body to overflow hidden.

Sorry, I should’ve known setting body to overflow hidden would result in this. Revert body’s overflow property value to default.

I’ve set these columns to overflow hidden instead. Let me know if it still doesnt work after you’ve done this.



Also, a general tip/rule of thumb - don’t use empty div blocks or cols as spacers like you have below. Use padding and margin values instead. This way, you will not have so many empty elements and your structure/code of the site will be much cleaner!


Solved. Thank you! :)

This can be solved by fixing what @jmkriz correctly identified.

Div Block 60 has a Min Width of 500px on mobile. You need to change that.

Just remove the min-width property value (set it back to default) and you’ll find your mobile version will not have extra space on the right.

Solved. Thank you! :)

Well, I would suggest removing empty elements and spacing with paddings and margins first :grinning:

This makes it easy for you to identify your sections/divs which contains content and controls spacing and positioning. Also reduces time when you have to debug certain bugs like that.

Looking at the IBM page, I’m guessing this is what’s making your page overflow scroll to the right.

Instead of having 1 row of 6 columns, why not split it up into 2 rows of 3 columns and have it all fit in the page?
image
image

For your Spotify and One Hour pages, the problem is the same as the initial problem with animations coming in from the right. If you recall, setting overflow: hidden for the right containers will fix this.