I have a big problem that annoys me enormously, it is the inability to remove the horizontal scroll on the mobile version of my site.
When I scroll down, the more I scroll the more it is possible to scroll horizontally.
I can’t seem to find where this problem is coming from. I tried to put the sections in “Overflow: Hidden” but that doesn’t change anything.
I noticed some issues at a couple points while scaling the window down on the live website, but I just happened to find this one in the Designer on the mobile breakpoint. It looks like this is caused by some titles that are breaking out of their container (I’d imagine due to some non-breaking spaces that were included when they were copied/pasted):
It’s worth noting that currently the Designer doesn’t allude to any horizontal scrolling issues (I went ahead and created a Wishlist item if you feel a feature like this would be useful!) but you can always use the X-Ray mode to pinpoint little issues like this—especially if it’s caused by the width of an element that may not appear to break the width in any way.
Adjusting the breaking settings didn’t seem to help fix the text wrapping, but after replacing the spaces manually it adjusted itself properly.
Thank you for your help !
I have try to delete all non-breaking space manually but the problem stay
When we scroll down, at the middle of body we can see the scroll horizontaly who increase… it’s very stranger. It’s look like an element who move to right with %
Ah okay, it’s possible that these were also problem areas (so it’s good that you went and removed them) however it’s the hero image that’s the culprit. As you get to the middle-size and small size screens, this image is offset to the right-hand side causing the scrolling.
To fix the issue, you just need to set your image container (container_1-copy) to overflow: hidden. I’d recommend just setting this on the breakpoints that you notice the issue, however you should be okay making this change across the board without any issue.
Hopefully that fixes things for you
@HGWeb - Just a note as I mentioned in my last reply, the Designer doesn’t show overflow so you’ll need to view the live project to see the problem. If the site has been published, you can grab the webflow.io URL by looking at the preview link and grabbing the text between the / and ? characters:
You can open this page on your smartphone. Scroll down, bottom of page and you can scroll horizontally ^^’ When you go up, this margin will be reduce… stranger…
Ah okay, this is due to the scroll indicator your using (shown on the very bottom of your screen on mobile) which is stretching wider than the width of the screen more and more as you get lower on the page:
On the desktop viewport, I’m noticing this isn’t really behaving as expected either with the indicator stopping about halfway across the page even at the bottom of the page) so after checking your interaction setting it looks like your using vh units (viewport height) instead of vw units (viewport width) for your bar width:
Changing these units on both the start and end position in your interaction fixes the scroll position bug on desktop as well as the overflow problem on mobile
