Mystery overflowing element

Hey,

For some reason, on desktop, the site is overflowing on the homepage, and adding a horizontal scroll bar. I can’t for the life of me find the element that is doing this, and after setting all the max widths to 100%, it continues to do this.

What is causing this to happen?

Hugo


Here is my site Read-Only: https://preview.webflow.com/preview/innovate-wealth?utm_medium=preview_link&utm_source=designer&utm_content=innovate-wealth&preview=517a2ae0989d11bb807a8fd291010aae&mode=preview
(how to share your site Read-Only link)

1 Like

Some of your sections use 100vw as their width (or max-width). Do not use 100vw or you will get horizontal scroll.

2 Likes

To piggy-back on what @dram mentioned, this is because vw’s don’t take into account the scroll bar width. If you know for a fact your site won’t scroll down (let’s say you have a small centered div with a form or something - no other elements) then 100vw will work.

Since that’s not always the case, it’s a good habit to use 100% for full-width elements (and 100vh for full-height elements) across the board.

2 Likes

To piggy-back-piggy-back on what @dram & @mikeyevin mentioned, sometimes it’s tricky to work with relative units only, if the parent elements lack defined values. So often vh’s are used for height values. This creates flickering on mobile BB’s because some browsers subtract the URL bar and it expanding and contracting alters the viewport’s height. This will cause flickering with absolute elements.

Some more info:

I’m not particular fond of this guy, but I just stumbled upon a video that goes into more detail on unwanted horizontal scroll inside WF

1 Like