Quick & Easy Way To Fix White Gap Issue On Oxygen Builder

Published: 3 weeks ago

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;
}

On Chrome, do this by clicking the + under styles in the Element Tab.

A screenshot of a computer

Description automatically generated with medium confidence

On Firefox, do this by clicking the + under rules in the Inspector Tab.

A screenshot of a computer

Description automatically generated

The code should look like this:

Graphical user interface, text, application

Description automatically generated

And the page should now look like this:

Graphical user interface, text, application

Description automatically generated

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.

A screenshot of a computer

Description automatically generated

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.

Graphical user interface, text, application, chat or text message

Description automatically generated

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.

Learn More | Our Review

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; 
}

⚠ 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.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Ezoicreport this ad
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

Ezoicreport this ad
A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram