Quick & Easy Way To Fix White Gap Issue On Oxygen Builder
Quick & Easy Way To Fix White Gap Issue On Oxygen Builder
This article will show you how to fix the white gap on Oxygen Builder. Having a gap on the right of your page when creating an Oxygen Builder website is a common issue that many face when creating pages and templates.
What’s Causing The White Gap
The white gap is not caused by the Oxygen Builder itself, instead it's caused by the way your page is laid out.
The actual white that you are seeing is the <body> of the page. By default, the body is set to have a white background, and when items push out of viewport with a visible overflow, both the item, and the white background of the body for the entire height of the full page will be visible.
You can confirm that this white background is the body by going into the dev tools, finding body, and changing the background to be red (this is great to confirm that this tutorial will help you fix that white gap).
The white gap will be on the right side of your page 99% of the time, as browsers will align the body to the top left corner of the viewport.
How To Fix White Gap In Oxygen Builder
The easiest way to fix the weight gap on the right side of your page in Oxygen Builder is to identify what element is pushing out of the container and address it.
How To Identify The Element
To identify the element, go to the page where the white gap exists (frontend). Open your browser’s dev tools by pressing F12.
Now, add the following CSS to the page:
div, img, span, a, section {
border: solid red 1px;
}
OR
* {
border: solid red 1px;
}Code language: CSS (css)On Chrome, do this by clicking the + under styles in the Element Tab.
On Firefox, do this by clicking the + under rules in the Inspector Tab.
The code should look like this:
And the page should now look like this:
What this does is outlines every major element on your page in a red border. This allows you to visualize where elements fall within their containers. Scroll the X axis of the page all the way to the right of the white gap, and then scroll up and down the Y axis of the page until you identify which element is causing the overflow. This will likely be the only element in the white gap that is outlined in red.
If you right click and select inspect element, you can even get the ID or class making it easier to identify and the oxygen back end builder. In this example, we’re looking for #_rich_text-22-8396.
Now that we have identified the element that is causing the white gap in Oxygen Builder, let's fix it.
Did you know?
The Swiss Knife for Oxygen Builder has a built in debug tool that does this without needing to go into the DevTools.
How To Fix The Element
The gap is caused by an element being too wide for its container, overflowing out, and pushing into the body of the page. The body (with a white background) then expands to over 100vw, causing the gap.
Because we have identified the element that is causing the issue, the way to fix it is to go into the Oxygen Builder editor for the specific page or template, and set the width of the element to fit into its container on all screens. This can be done by setting the max-width to 100%, the width to 100% (or a relative unit), or removing a relative unit like 400px (if the container is less than 400px, it’ll overflow out).
More reading about how to space so the overflow won’t happen: https://stackoverflow.com/questions/3630551/web-layouts-pixels-vs-percentages
If all other fixes fail, you can also:
- go into the advanced settings of the section that contains the element causing the issue, layout tab, and choose “overflow | hidden”.
- add the following CSS to your site using the Oxygen Universal style sheet or Advanced Scripts.
body, html {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}Code language: CSS (css)⚠ This should only be used as a last resort as it doesn't fix the problem, it just hides it.
Any other tips on how to identify and fix the White Gap issue on Oxygen Builder? Leave them in the comments section below.
Bookmark This Post
James LePage
Thanks a lot, so usefull!