Toolonomy Logo

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.
Mohammed Wasim Akram
Blog Post Author
Last Updated: March 21, 2022
Blogpost Type:
0 Shares

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!

0 Shares
Toolonomy Online Community Image
Join Toolonomy Community
Toolonomy Community is a dedicated place to explore the Discussion, Content, Deals & Hidden Details about the Business Development Tools that have the potential to help you succeed in your journey to Digital Entrepreneurship by letting you build, manage, and grow your Business Online with ease.
Free Membership
A Google & HubSpot Certified Digital Marketing Specialist, Self-Taught WordPress Expert, Useful BizDev (Business Development) Tools & Deals Explorer, and the Founder of SyncWin & Toolonomy.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Lucas Pelton
2 years ago

The solution for /* Fix Mobile White Gap Issue Due to Lengthy URLs or Texts Without Spacings */ will cause unsightly word breaks anywhere a word might be broken at a line ending. A tighter solution is to identify those long strings and wrap them in a span, then apply this all-inclusive styling to break only those long texts, leaving the rest of the body text to wrap as expected:
[ credit: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ ]

.wrap-long {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

Related Blog Posts
Explore all the other related blog posts.
WordPress
Best WordPress Schema Markup Plugins: Structured Data Tools
Want to boost the SEO of your WordPress site? Look at these amazing schema-marking tools! Learn how to optimize your site's material for search engines and increase traffic to your sites....
WordPress
Bit Integrations Review: No-Code WordPress Automation Plugin
Are you looking for a powerful and easy-to-use WordPress automation plugin? Checkout Bit Integrations! It is a no-code robotic process automation plugin for WordPress that seamlessly connects your website to hundre...
WordPress
WordPress Header Disappeared: Restore Missing Theme PHP File
Get your disappeared WordPress header or footer back in no time with our step-by-step tutorial. Learn how to fix the vanished header or footer by restoring the missing theme PHP file with ease. Click now to bring y...
Explore Blog

Become a Toolonomy Community Member for Free!

Consider joining our Official Community Group if you want to get access to exclusive insider content and information about Exclusive Digital Tools and Technologies. Also, you will be able to get involved in interesting group discussions with like-minded people that are interested in similar topics as you.
Become a Member
Toolonomy Logo
Made with ❤ for Digital Tool & Tech Enthusiasts
Copyright © 2018 - 2023 by SyncWin | All Rights Reserved.
Top crossmenu
0 Shares
Copy link