Streaming live at 10am (PST)

How to make site width 100% of screen

So right now when previewing my site you can scroll to the right even though nothing is over there.

I want the site width to be just whatever the width of the screen is so you can only scroll up and down.


Here is my site Read-Only: https://preview.webflow.com/preview/warrens-blank-site-26df33?utm_medium=preview_link&utm_source=designer&utm_content=warrens-blank-site-26df33&preview=6c72580b063a11b3e83db7957fa8fdca&mode=preview

Hey Warren -

Check out this screenshot:

Setting max-width to 100VW (meaning, 100 Viewport Width, aka, Browser Width) and setting Overflow: Hidden will technically resolve your problem, but the reason that your website is having horizontal scroll is because of how you have your “Design for the Modern World” tag positioned.

Instead of setting Position Left to 36% on that element, might I suggest resetting that value by holding ALT and clicking the 36%, then simply just center align the element under Typography settings? You could achieve the same effect that you desire (centering the element on the page) without ever having to touch max-width and overflow. Just a suggestion! See below for a screenshot:

image

Some helpful resources:

Hope this helps!

1 Like

Wow! Thank you for that in depth reply. Those are both great suggestions and i will use them both. Should help me in the future for the rest of this sight. Awesome solution

1 Like

For sure! Happy to help. Enjoy your weekend, and welcome to the Webflow Forums! :confetti_ball:

2 Likes