Streaming live at 10am (PST)

Trouble With Overflow. Unwanted Horizontal Scroll

What’s going on beautiful people! I’m having this problem where my page has an unwanted horizontal scroll. Now, I’ve tried solving it by using the overflow: hidden, but that does not seem to work and I don’t understand because I see it working for others. Can someone point me in the right direction?


Here is my site Read-Only: https://preview.webflow.com/preview/smart-kaya?utm_medium=preview_link&utm_source=designer&utm_content=smart-kaya&preview=47674420051f8a50fb3b59b77ed294ae&mode=preview

Here is a screenshot of what’s happening

Hi there Jaeda,

I cannot see it on the desktop breakpoint (like your screenshot), but I can definitely see it on the tablet breakpoint.

Using the X-Ray Mode (Cmd+Shift+X), it looks like your “Hero-Section” class is using a viewport width of 100VW, and a margin of 20px on both left and right. Resetting the margin to 0 for that class in the tablet breakpoint removes the horizontal scrolling for me.

Hope this helps :slight_smile:

1 Like

Yeah I reset everything on to 0 but I still get the horizontal scrolling when I publish the site.

I don’t see overflow on my screen. I have a 21:9 widescreen monitor.

But I’ve experienced this phenomena before and I realized that by setting the width to 100 vw, it’s taking into account the small section that is covered by the scrolling bar at the right side.

2 Likes

Got it working!!! My solution was that the ‘Hero Section’ had a width of 100vw, so I thought what would happen if I changed it to a percentage and voila, no more horizontal scrolling. Turns out that in my case, If max-width: 100% is the width of the viewport without scrollbars, then I didn’t need 100vw to start with, and when set to 100vw the browser includes the right scroll bar, hence the overflow. Just a beginners mistake I guess :slightly_smiling_face:

2 Likes

Yes, you had it right!

Yup!
Glad you figured it out quickly. :slight_smile:

That’s great Jaeda :slight_smile: nice problem solving!