Streaming live at 10am (PST)

White space on the right

Hi again, I got stuck at the extra white space on my site. When I scroll to left, there is a white space on the right.
image

I checked out the forum for similar questions and tried to delete any negative margin on my screen but still didn’t work. :frowning: I don’t see any extra margin now but I’m still confused about what’s going on.

Can someone help me on this please?

Thank you so much!

Here is my site Read-Only: https://preview.webflow.com/preview/minyizhu?utm_medium=preview_link&utm_source=designer&utm_content=minyizhu&preview=a1be4f433dd5ee57247c1ae4235efb2f&mode=preview

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

Hi @shwn when I move my mouse from right to left, that’s where I see the extra white space on the right as shown in the picture. Not sure why the read-only link doesn’t show that on your end but it does happen on my end…

I just published the site at minyizhu.com. You can see the problem I’m talking about.

Thanks for your help in advance!

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.

@shwn Hi Shawn, thanks for your reply! Could you specify which container boxes should set to Overflow hidden? This issue actually applies to all my projects (not only Spotify), should I edit all containers and make them Overflow hidden?

PS: I also tried once with the cover page, but the problem still persists. :cry:

Here I changed it to Overflow hidden

When in present mode, my mouse can still move things between left and right.

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

Try just setting your body to overflow hidden.

@shwn Hi Shawn, I did what you said. It seems like the position is fixed now. Thank you!! But I encountered another problem now that I can’t scroll my page anymore.

If you check out my site now you’ll see that I made the body to overflow hidden, but then if you check out the published site https://www.minyizhu.com/ I can’t scroll down my webpage anymore :cold_sweat:

Sorry for the back-and-forth changes. I’m still new to the tool…

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!


@shwn Hey Shawn, awesome, it works now!!! Thank you soo mcuh :slight_smile: I’m so happy. Now that my home page doesn’t have this problem anymore. But my other pages for different case studies still have this problem exit when the breakpoint is at phone portrait. Should I follow your rule by setting all columns (with animations) to overflow hidden instead?

This is what I see at the phone breakpoint for all my projects.

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.

@shwn Ah I see. I fixed that div block 60 now. You’re right Shawn, I put too many div block everywhere and it is difficult to track things around. I still have a lot to catch up!

I also have the same problem with my other pages for the three case studies. I checked all of them and didn’t see the div block 60 so this issue might be coming from another div block?



What methods would you advise to check this mistake? I know I have too many div blocks now…which is bad :frowning:

And thanks again for being so patient and supportive in helping me fix these tiny issues.

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.