I hate asking such a noob question but I am honestly confused and at this point just frustrated why I cannot find the component on this site that is making it non-responsive.
The issue is the ABOUT and CONTACT pages have an overflow that extends horizontally. What is driving me insane is all the components are set to overflow hidden and all sections should be set to 100vw or 100%. It is only on these two pages in particular, its driving me crazy and I have not been able to figure it out - it seems like I need another set of eyes. I would imagine whatever is wrong with the ABOUT page is the same as the contact
I sincerely appreciate the time however that did not help - I at first tried pushing the 1% from margin to padding to keep the look consistent - after publishing I tried again and it was still there. For kicks, I even deleted section 75 altogether just to see if that was the culprit and that was not it. Do you have any other advice?
On the about page you linked, that fixes it the horizontal scrolling in the designer. 100vw + 2% is wider than screen width, so the browser was simply following instructions.
If you have something still happening on other pages, you can use my technique here.
If the problem is only appearing on published pages then it may be due to interactions, scripts, or custom CSS. You can do a similar thing using Chrome devtools on the published HTML to find it.
I do this kind of troubleshooting professionally if you need further help, but it’s generally just a time-intensive debugging process to isolate and identify the layout problem. The “process of elimination” approach is fastest IMO.
On mobile devices it can be more difficult so hopefully you can reproduce it in a desktop browser.
I do not understand where you are getting the 2% from; even going in every container and setting everything to overflow none does not help - i do not see where there is a 2% adjustment wider than the screen width
It’s the way the HTML box model works. You had 100vw box, and you added 1% margin left and 1% margin right. That equals the full page width ( 100vw ) plus 2%.
That’s what was causing your blowout on Section 75. Look for similar layout problems wherever else you might be experiencing it on other pages.
I appreciate it but I just do not think that is the case I deleted the section and it is still the case. I have other parts on the site in the homepage that also have the same margin styling and there is not an overflow unless I’m just completely wrong on this
I’m using Chrome + Windows. At desktop breakpoint, that was the only section forcing a > 100% with page layout, and the horizontal scroll.
Again, you can use the technique I demonstrate in the video, plus chrome devtools, to isolate the problems at each breakpoint, on each page.
You’ll find the most common issues are width, min-width, widths + margins that force the layout wider than the browser view, or sub-elements like non-wrappable text that creates that same problem.
I am going to mark this as solved; I was able to resolve the issue but not the way I would like - I spent a couple hours this morning completely revising all min/max width and removing all exterior margin/padding edits and i still couldn’t get it to work. I decided instead to force the width everywhere at 99% and use flex-stretch across the width to give it the illusion it takes up the whole page without going over - anyways it is resolved. thank you for your time