I have spent 48 hours troubleshooting different methods to remove the space on the right side of my mobile viewport in the design editor.
I’ve tried possible solutions like removing all negative margins, setting fixed widths, hiding overflow, adjusted the body, container, and background sizes and settings, and even looked through a browser inspector to find any element that might be extending too far to the right.
I can’t seem to find the issue. I can’t finish aligning everything else properly without this issue resolved, as it continues to mess with the layout and alignment of other elements.
I originally edited this at a much smaller phone width around 200px, but increased it to the max 479px to see if I could resolve the issue at a different dimension. I was able to reduce the space on the right through a multitude of adjustments, but still unable to completely remove it.
The issue seems to be caused by a number of things — most of which are using padding values on your wrappers that’s pushing content around inside of it:
Removing the padding on your Container 2 class, and then resetting the width of your Section 6 class (along with omitting the negative left value) shows your content sitting nicely in the center of the viewport:
Outside of that, it looks like your use of absolute values (like pixels) and unique classes (Container 1, Container 2, Section 1, Section 2, etc) are making it difficult to keep your content positioning standardized across various elements. Using global padding and container classes, for example, means that making responsive changes are as easy as updating a couple of values that affect many elements across the entire site.
I know it can seem daunting but these things will help dramatically when needing to make adjustments on smaller breakpoints.
There are tons of frameworks out there that help standardize class naming, but personally I use Finsweet’s Client First which uses easy-to-read class names and has great documentation.
Hopefully that helps point you in the right direction but don’t hesitate to reach out if you have any other questions!
Ah, you are my savior! Thank you so much for you quick and direct help, I’m working through the widths after making those initial corrections and seeing my elements begin aligning correctly. Your description was very helpful, it makes great sense. Thanks again!
