Hi there.
My homepage is appearing wider than the screen size, but I swear I’ve checked everything and all elements are set to 100vw. Can’t figure out why this is occurring and it is creating an annoying horizontal scrollbar.
Can anyone see why this is happening? doesn’t show up in the designer, just on the published site - it also doesnt occur on mobile which is why i’m assuming it’s either the background video or navbar as these are hidden on mobile.
Site:
Hey @Tom5,
I did not see any horizontal scrollbar, or experienced horizontal scrolling on your live site. I tested on the latest chrome and safari. Maybe clearing your cache, reloading webflow, and publishing again will fix your issue on your end. But I couldn’t replicate your issue.
Hi Pablo,
thanks for the response, I did what you suggested but no luck.
I just noticed that it is present on other pages too.
You can see the scroll bar at the bottom of these screenshots. Something to note is I am on a fairly large monitor, but the scroll bar stays when i reduce the tab size.
Just swinging by here after the ping in the other horizontal scrolling thread.
I wasn’t able to completely remove the horizontal scrollbar as there are a number of problem elements, but it looks to me like it’s your use of VW units for the width of your elements as opposed to %. Make sure that you’re using width/max-width: 100% on your full-width elements as VW units don’t take into account the scrollbar.
If you clear out all of those it should remove any horizontal overflow 
It is so weird @Tom5, because I have a large monitor too and I don’t see any horizontal scroll bars. I would do what @mikeyevin mentioned and if that doesn’t work you can add this code on an embed element to fix your issue:
<style>
body {
overflow-x: hidden;
}
</style>
I am guessing you are using Mac devices which do not have scroll bar and that @Tom5 Is using a Windows device which always has a scroll bar. I agree with @mikeyevin That he just needs to set width to be 100% rather than 100vw.
This is actually the reason I think most sites tend to have them as MacOS gives users the ability to hide the scrollbar—which, as you’ve mentioned, eliminates any space it would normally take up.
@Pablo_Cortes - I’m not sure if this is the situation in your case, but if so you can disable the effect by going to System Preferences > General and changing the setting for “Show scroll bars:”:
I recently switched over to MacOS myself and opted to keep that setting off so that I can see any overflow on my projects and you’d be surprised at how many big-name sites I’ve seen that don’t take that into account. I’m not sure when a scrollbar would be hidden in my case, but I’ve opted to set it to the option in the screenshot above.
Ideally I’d love to see an update to browsers that prevents that scrollbar width from affecting the VW sizing, but until then it’s always a good idea to avoid using those units when working with full-width sections or elements
This is interesting @Incognito_Agency and @mikeyevin because it is not just the horizontal scrollbar, I have seen websites in the past that have horizontal scrolling due to overflow elements, obviously without the scroll bar. But for @Tom5 case I can’t see any scrolling horizontally. So, whether I have the horizontal scroll bar or not, if the site overflows, I should still be able to see the scrolling, right? I’ll take a look with scrolling bars as mentioned by @mikeyevin.
Correct, not all sites that have horizontal scrolling are due to the scrollbar visibility issue, however sites that have ~10px of horizontal overflow (which appears to be the case in @Tom5’s case) it’s most likely caused by the scrollbar.
If you’re shifting the position of elements off the screen without wrapping the element in a parent container with the x-axis overflow hidden then you will see the scrollbar regardless of whether you’re showing the scrollbar on MacOS. The common “hack” is to give the entire body element overflow-x: hidden which will cover any rogue elements that fall outside of the available horizontal width, however there are probably some arguments against this in most cases.
@mikeyevin @Pablo_Cortes @Incognito_Agency
Thanks all for your help, switching from VW to % worked great. I didn’t know the difference before but now I do!
I am on mac, not windows, but like Mike said I’ll keep the scrollbars on so I can see if I have overflow in future.
For anyone with similar issues, when using Firefox developer you can see which elements have, scroll or overflow.
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow
Thank you!! This was what I needed
