Hey everyone! This is just a quick one today. You probably know what I'm talking about when I say the "gap issue". It's when you have a sometimes small, sometimes large, space on the side of your page (usually in the smaller viewports) created with Oxygen Builder.
The white space is almost always caused by one of your elements having a set width that is too high for the size of the screen. Browse through all your elements, especially ones you recently edited, and check for something width hard set in pixels. That's the most likely culprit. It can still happen if you're using percent widths and other units as well, but it happens a lot with specific pixel widths if you forget to set lower widths for smaller viewports.
If there are some elements stretched out into the white space you can generally safely assume that those elements are the ones you need to fix.
If it's not obvious what element is causing the gap, there is an easy strategy to make it a little bit easier to see. Go ahead and open up your web browser's dev tools then select the <head> tag. From there, add the following code to the *::before, *::after selector:
border:1px solid red
This will add a red border around every element on the page to make it a little more obvious which elements are stretching over the edge. You can also accomplish the same by toggling the gridlines feature in Hoverify if you have that browser extension.
Thanks to Supamike for that idea!
I hope this helps some people!
