Written by Editorial Team on April 22, 2020

How To Solve White Gap On The Right Side On Mobile Devices When Using Oxygen Builder?

We noticed an increasing problem with Oxygen Builder where new users are facing repeated white gap on the right side on mobile devices. Some call these are a bug within Oxygen Builder while others have different thoughts on that.

Either way, you are going to find the exact quick fix (solution) to remove the white gap on the right screen when using Oxygen Builder.

Before that, here's an important update from Oxygen Builder team.

This is normally caused by some element on your page that's too wide. When you set element widths in px values, they don't scale. If you have an element that's 500px wide but the viewport is only 300px wide, you'll end up with a white gap on the right side of your site.

In some cases, it can be caused by an element that's animated in from the side using the Animate on Scroll feature.

You can tell if this is the case, because the gap will go away once you've scrolled to a certain point on your page.

If that seems to be the cause, you can add overflow: hidden to the container of the animated element to fix the issue.

Oxygen Builder Support

How To Easily Fix White Gap Problem Using Oxygen Builder

  • Step 1: On Chrome (or Firefox), open the DevTools (F12) and activate the mobile mode.
  • Step 2: Select the Responsive mode and drag the border to change the size, until you see the gap clearly
  • Step 3: In the DevTools, go to Elements, click on the <head> tag and add this CSS in *, *::before, *::after
  • Code: border:1px solid red

You can also click on the '+' sign and add " * { border: 1px solid red; } ". Next scroll down until you find the problem that is creating the white gap problem in mobile view.

Article written by Editorial Team

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts