Unwanted White Gap Fixing on Mobile Viewport in Oxygen Builder

In this post, I am going to disclose many different reasons for the right-side white gap issue on the mobile viewport of a website built with Oxygen Builder, and also I will explain how to properly fix them in the right way.

Main Reasons for The White Gap Issue on Mobile Viewport in Oxygen

Before diving into the different reasons for the mobile white gap issue I would like to let you know that most of the time this right-side white gap issue occurs due to the two main reasons which you can find below.

Reason #1: Element Width is Fixed & Higher Than The Mobile Viewport

When there is a particular element on the page that has a specific fixed width which is usually wider than the mobile viewport, then that element overflows outside the actual page viewport which is obvious.

For example, if an element on your page has a fixed width of 480 pixels and the mobile phone you are using has only 300 pixels wide-screen viewport, then in that case your web page will end up with a white gap on the right side of the mobile screen.

So in this situation to fix the issue you need to add the CSS max-width: 100%; to the parent div container which contains that particular wide element.

The other option is to change the fixed width of that particular element from 480px down to 300px which is exactly the page viewport size where you are getting the white gap issue.

But the first approach is NOT recommended to fix the issue because if you follow the second approach, then next time you will find the issue when the viewport is below 300px.

If you are not clear about the viewport breakpoints and how they work, then to understand how responsive design is made using different viewport breakpoints you should check the documentation post by Oxygen.

Reason #2: Scroll Animation Element That Slides in From Offside Screen While Scrolling The Page

Sometimes the white gap issues occur on the mobile viewport because of an element that is using the Animate on Scroll feature of Oxygen builder.

Actually in this case the white gap comes for the element which has the scroll animation, and it slides into the screen from offside when you scroll down the page to the section where that element is sitting.

To confirm that the problem is coming from an animated element you need to scroll down the page and if the white gap disappears after scrolling down to a different section than the animated element, then most likely the white gap issue is coming from that animated element.

Fixing this issue is also not that complicated, you just need to add overflow: hidden; CSS to the parent container of that animated element that's it.

How to Find Where The White Gap Issue is Coming From

Although I have explained the main reasons as well as various scenarios when the white gap issue occurs in a website built with Oxygen, still most of the time it's difficult to understand where the particular problem is coming from.

For that reason, I would highly recommend you to read the most helpful tutorial about how to find where the white gap issue is coming from by an Oxygen expert Supa Mike.

Once you follow the above-mentioned tutorial step by step you will find out the main culprit for that white gap issue, and then it would be easy for you to fix it.

Alternatively, you can also use the ready-to-use Debug mode feature of the Swiss Knife Oxygen Add-on if you don't want to do it manually.

Either the problem is coming for the main two reasons that I have explained in the above section or it is occurring due to some other specific reasons which I will explain in the below sections, whatever the case you can apply the solutions I explained in this post to fix the mobile white gap issue.

How to Add Stylesheets Through The Oxygen Builder Editor

Before anything else, you need to know how to add a style sheet to the Oxygen editor and then you just need to copy and paste the CSS codes there, which I am going to share with you in the below sections.

Step #1:

The very first step is to open the Oxygen Editor then head over to the Manage option and then Stylesheets and now hit the Add Stylesheet button to add a new stylesheet.

The Navigation Should Look Like This:

> Oxygen Editor
> Manage
> Stylesheets
> Add Stylesheet button

Step #2:

The next step is to give a proper name to the new stylesheet and then add the necessary CSS code block which you can find within the below code blocks after that just hit the save button.

Fix The White Gap Issue on Mobile Viewport Due to YouTube Video or Other iFrame Embedding

Although you can add a YouTube video on a WordPress page using a dedicated Gutenberg YouTube block still in certain situations, we just have to embed a YouTube video on our web pages using the embed code provided by YouTube.

But the problem is that when you use Oxygen Builder to build your website, most likely you will come across a situation where adding a YouTube embed code or any other iFrame code will create a white gap on the right side of mobile viewports.

If that is the case also with you and you are looking for a permanent solution, then copy and paste the below CSS code to the Oxygen stylesheet to fix that mobile gap issue due to embedding the YouTube video code or any kind of iFrame on a post or page using a code block.

/* Fix Mobile White Gap Issue Due to YouTube Video iframe Embed*/

@media only screen and (max-width: 768px) {
iframe {
    width: 100%;
    height: auto;
}
}

Fix The White Gap Issue on Mobile Viewport Due to Embedding a Code Snippet to The Pages

Sometimes we just need to embed some code snippets on our blog posts or pages so that the website visitors can easily copy and use the snippets on their websites.

But if your website is built with Oxygen builder then you should consider adding the below CSS code to the Oxygen stylesheet to avoid getting the unusual white gap issue on mobile devices.

/* Fix Mobie White Gap Issue Due to Embedding Code Snippets to The Frontend */

code {
  max-width: 100%;
  word-break: break-all;
  white-space: pre-wrap;

}

Fix The White Gap Issue on Mobile Viewport Due to Lengthy URLs or Texts With No Spacing

Some of the times we are just bound to add super lengthy URLs or Texts on a page or post but with Oxygen builder, you could end up facing a white gap issue on the mobile devices.

But don't worry about it as you can fix that issue very easily if you just copy and paste the below CSS code to the Oxygen stylesheet following the steps that I have already explained at the beginning of this article.

/* Fix Mobile White Gap Issue Due to Lengthy URLs or Texts Without Spacings */ 

body {
word-break: break-word;
}

Fix The White Gap Issue on Mobile Viewport Due to Added Images Through Gutenberg or Classic Editor are Too Wide

Recently I just noticed that one of my old blog posts is having the right side white gap issue and some of the images are too wide that they are overflowing out the page section for that reason the actual page was shrunk down to a thin section.

If you are also facing a similar problem like that then you are in the right place as I have come up with a simple solution for the problem that I explained in the above paragraph.

To fix that white gap and image overflowing issue on mobile that is occurring due to too wide an image added via Gutenberg or even the classic editor just copy the below CSS code and paste it into your Oxygen style sheet, it should be enough to fix this particular problem.

/* Fix Mobile White Gap Issue Due to Images Added via Gutenberg or Classic Editor are Too Wide */

figure {
    max-width: 100%;
    margin: 0 !important;
}

Fix The White Gap & Content Misalignment Issue on Mobile Viewport Due to 3d Party Plugin's Shortcode Outputs

On this website, I have used the BasePress Knowledgebase plugin to set up an entirely different post type which is separate from blog posts, and where I can publish short articles with my personal experiences to achieve that I had to add a shortcode provided by BasePress.

Although BasePress has deep integration with Oxygen still I found an unusual alignment issue as well as a white gap issue on the mobile devices, but fortunately, I have found the solution to fix those issues.

If you are also facing similar kinds of issues as I was facing then you should copy any of the shortcode snippets from below and paste them to your Oxygen stylesheet.

But in this scenario just adding the below CSS code won't fix the problem for you and there is one extra step involved, which is you need to replace the CSS class or Id names of the Div and the Shortcode element under that div with your custom classes or Id names.

/* Fix Mobile White Gap and Misalignment Issue Due to A Shortcode */

.Global-Div-Full, .Global-Shortcode {
max-width: 100%;
}

OR

/* Fix Mobile White Gap and Misalignment Issue Due to A Shortcode */

#div_block-00-00, #shortcode-00-00 {
max-width: 100%;
}

Conclusion

In this article, I have covered all the different situations where I encountered the right side white gap issue on the mobile viewport and I also explained how to fix them step by step, so that not every other person has to reinvent the wheel each time.

You may also find this video very helpful about fixing the white space or gap issue to the right on mobiles by an Oxygen expert Sridhar Katakam, where he explains many different approaches to fix this issue using custom CSS in Oxygen.

However you might be still confused or not able to find and fix the white gap issue even after doing everything explained in this post, then I would recommend you contact Oxygen Support to solve your problem.

Also, I would like to let you know that as soon as I discover other ways of fixing this mobile view page gap issue I will keep adding them to this post so if you want to stay updated you can bookmark this page.

Thank you for visiting Toolonomy.com!