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?
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
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.
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
Yes, you had it right!
Glad you figured it out quickly.
That’s great Jaeda nice problem solving!