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!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
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.