Website has horizontal overflow

tlk.webflow.io

When clicking on my published site there is a scroll bar horizontally. I’ve checked any layer that might cause that but couldn’t find a solution.

READ-Only Link below, hopefully someone can save me from my stupidity x)


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

1 Like

The issue is with the .footer-section width set at 100vw.

Thank you! May I ask why this has caused this issue? Shouldn’t 100vw be the exact width without the overflow?

Scrollbar :slight_smile:

https://drafts.csswg.org/css-values-3/#viewport-relative-lengths

1 Like

It used to be, but something changed without explanation with this as I had loads of sites working with vw’s until fairly recently. You can fix with percentages easily but it needs some explanation, it could be a mac > pc thing though.

Nah, the vw not taking vertical scrollbar into account bug has been here since forever. The only time you won’t see an issue is when your content is less than page height (no vertical scrollbar to cause an issue)

1 Like

Nope, this is a recent thing for me as all the sites were using vw with longer form content for a couple of years with no problems, unless the problems are from mac os?

Here is the bug report from 2014.

Perhaps you weren’t seeing the horizontal scrollbar because your mac settings were to “show scrollbars only when used” - this is a really frequent case among mac users. I always set mine to be always visible to catch these kind of problems.

So you are an edge case user of mac os in that case. The issue is viewing on other systems? Do you think mac os is handling vw correctly?

No, it is like that everywhere. I have a desktop pc and a macbook so not a hardcore mac user :smiley:

It fixed the bug on desktop view, when watching the published site on a mobile device, the bug still exists even though the footer is no longer set to 100vw.

How can that happen? Because you can scroll to the right, the left gradient I set extends too and cuts into the content…

You have a lot of elements being 100vw on your tablet view at which point horizontal scroll starts happening. Go through everything in your design on all breakpoints and change 100vw to 100%.