isotropic-2022
Share
Blog
Search
Menu

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

By James LePage
 on June 2, 2021
Last modified on January 7th, 2022

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

By James LePage
 on June 2, 2021
Last modified on January 7th, 2022

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.

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

isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
oxygen-course-isotropic
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
Get Launch Notification & Discount
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sergio
Sergio
8 days ago

Thanks a lot, so usefull!

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram