Mobile view has white space on right

[designbythink]

Hi

My website (https://toomuchwifi.co.za/) has a bar of white space down the right when viewed on mobile. It can also be seen in mobile view in devtools:

On iPhone:

Viewing with devtools:

I have:

• Updated all plugins and themes
• I couldn’t update Modern Events Calendar. Why is that? Is this no longer supported?
• Checked for plugin and theme conflicts
• Switched off all caching, CDN, minifying
• Removed all custom CSS
• Added html { overflow-x: hidden; }
• I have also looked at the other similar support topics on here and nothing resolves the issue.

Is there something I’m missing? Even if you could just point me in the right direction. I don’t know where else to look.

Many thanks in advance for your help!

[prakash_s]

Hello @designbythink,

Thanks for writing to us.

I would suggest you go to the page and go to the section(I have added the screenshot in the secure note)–>Row—>customize —>element CSS. add this custom CSS code.

$el > .x-row-inner{
margin-right: 0;
margin-left: 0;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[designbythink]

Hi, thanks for your response.

Turns out it was not the row (I followed your advice and it didn’t fix anything). But I found the following code that was being injected from somewhere else (I still can’t figure out where):

body {
    overflow-x: visible;
    display: revert;
}

I have added the following to the global CSS to try and override it and it works okay on most pages:

body {
  overflow-x: hidden !important;
  margin: 0 !important;
}

In case someone else has this same problem.

Some pages (like the Home page) still seem just a few pixels too wide, meaning there is still a horizontal scrollbar. Any advice on how to eradicate any and all horizontal scrollbars from Pro?

(This is not a custom coding question – I just need someone to point me in the direction of why this theme is not behaving the way it should. I can do all the custom coding and fixes myself.)

Thanks again for your help!

[tristup]

Hi @designbythink,

Glad that you are able to find the solution and shared it with others.

Thanks