Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
BasePress
Blocksy Theme
Brand Building
Bricks Builder
BunnyShell
Cloudflare
CSS
Digital Marketing
Elementor
Email Marketing
Entrepreneurship
Fluent CRM
Fluent Forms
Fluent SMTP
GoDaddy
Google Fonts
HTML
Hydrogen Pack
JavaScript
Jetpack
Kadence Theme
LiveCanvas
Meta Box
Online Business
Oxygen Builder
OxyMade
PHP
Piotnet Forms
Pods
SaaS
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
WordPress
Work From Home
Zion Builder

Unwanted White Gap Fixing on Mobile Viewport in Oxygen

Written by:
Mohammed Wasim Akram
First Published on:
April 13, 2020
Last Updated on:
June 21, 2021
Post Categories:
✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.

Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.

However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.

Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.

Feel free to explore our Legal Policy Pages.

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 times 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, 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 exact as the page viewport size where you are getting the white gap issue.

But 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 documentation post by Oxygen.

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

Sometimes the white gap issues occurs 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 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 That Where The White Gap Issue is Actually Coming From

Although I have explained the main reasons as well as various different scenarios when the white gap issue occurs in a website built with Oxygen, still most of the time it's difficult to understand from 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 that 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 is 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 and 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 the mobile devices.

If that is the case also with you and you are looking for the 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 the 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 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 post is having the right side white gap issue and some of the images are too wide that they are overflowing out the page section and for that reason the actual page was shrink down the 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 on the above paragraph.

To fix that white gap and image overflowing issue on mobile that is occurring due to too wide 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 and 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 like I was facing then you should copy any of the shortcode snippets from below and paste it 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 personally 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 the Oxygen Support to solve your problem.

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

Thank you for reading I hope it was helpful for you as well.

Become an Insider to Syncronize with Web-Success.

email Newsletter
Facebook Group
Subscribe to our newsletter to get insider wisdoms.
Join our community to connect with likeminded folks.
Join FB Group

Related Resource Posts

September 25, 2020
Display The Last Modified Date of Your Pages in Oxygen Builder

If you are wondering how to display your page's last modified/updated date along with or instead of the page published date in the Oxygen template, then in this post I will teach you how to do that using a code snippet within a few minutes.

Read More
July 30, 2020
Hide Plugins from The WordPress Dashboard Plugins Page

In this article, I am going to share with you step by step process to hide any plugin you want from the WordPress Dashboard using Function PHP code.

Read More
1 2 3 8

Leave Your Feedback

Subscribe
Notify of
guest
2 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

Blog Categories

Favorite Products

WordPress Support - Sidebar Widget Ad Banner Image - SyncWin
SyncWin Community Group Ad Banner Image - SyncWin
Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram