I’m looking for some help resolving an issue that I’m encountering with regard to the responsiveness of a website I’m working on. For some reason, when I view my homepage in mobile view, it seems that there is a small amount of space on the right side of my sections that allows the user to scroll a bit to that side. I don’t want that to happen, and I’ve been having trouble getting all of the sections to line up with the screen width. I went through and manually set the width of most of the elements, containers, and sections; however, this still seems to happen, and I cannot seem to find what is causing this extra space to occur. It only seems to be an issue in mobile (portrait and landscape) views.
Any input here would be greatly appreciated!
Thanks,
If you share your staging link I could try to look for the specific sections causing the overflow but generally I see a lot of overflow issues coming from setting widths at 100vw instead of 100%. VW includes the viewport with plus the width of the scrollbar whereas using percentages does not.
Doing a search of 100vw in the Style Selector came up with these sections that have width set to 100vw. If updating these doesn’t solve it I would go element by element on the mobile landscape breakpoint to see if you have 100vw set anywhere else.
The easiest way to do this is to view inspect the code in the browser, as a mobile. Manually delete sections of code, one section at a time, to see when the screen pops into place.
Once the screen is in place that means the last section you deleted contains the faulty element. Open the section, and then proceed to do the same for each container or div inside the section. Rinse and repeat untill you have narrowed down into the specific element that causes the issue.
Once you have tracked the element down, head back to Webflow and redesign that specific element, and you should be good to go!
