[Resolved] screen width – horizontal bar in iphone

[Sabine]

Hello there,

I get a horizontal bar in the iphone for the following website

I have tried to put in the bellow but that does not seem to solve the problem

/*get rid of horizontal browser bar*/
body{
    overflow-x:hidden;
}

Looking forward to your help as this wobly screen is driving me insane.

Kind Regards, Sabine

[Leo]

Hi there,

That CSS fix above is just a patch and sometimes it doesn’t work.

I can’t get it to happen on browser re-sizing so it’s a bit hard to tell what’s causing it.

It’s possible that a plugin is causing the issue. Can you try #1 and eliminate any plugin faults?
https://docs.generatepress.com/article/debugging-tips/

Let me know.

[David]

You have this CSS added:

.mobile-header-navigation {
    padding: 5px;
}

Which is increasing the width of the navigation. If you want to keep the padding, then add this property to the above rule:

box-sizing: border-box;

[Sabine]

David, thank you so much! You are a life saver.

I dont know how that came into the custom css (probably while I was previously testing another layout.)
All solved.

Two lesson learned:
1) delete all custom css before you upload a new theme
2) if it has to do with mobile then please do check CSS for “mobile” first

THank you again for your quick help. Have a good day.

[David]

Glad to be of help 🙂

[Author]

Posts