html width in iOS version

Hi Marco, I’m not seeing that gap in Safari on iPhone 5s / iOS 8.1.1 so I’d like to ask some troubleshooting questions:

Do you see the gap when logged out of your site?

Is the screenshot taken on the homepage? If not, could you provide the specific link?

What exact version of iOS are you running, is it 8.1.1?

What browser are you using?

Hi Kathryn,

Yes, the gap was logged out and logged in too; the screenshot is on the homepage and yes, my iOS is 8.1.1.

I partially solved issue changing the meta viewport to
<meta name="viewport" content="width=device-width, initial-scale=1">.
Still a horizontal movement but isn’t important, the gap is gone ??
There is something strange in media query I guess, but it’s a common problem in wordpress responsive themes. In this case, theme that works perfectly in mobile version is Water Lily: https://www.marconoris.com/.

Thank you!

Thanks for providing your fix. I’d like to ideally get to the bottom of this so I can report this to our developers, so I’d like to ask you a few more troubleshooting questions so we can attempt to replicate:

Were you using Safari or a different browser?

What type of device are you using? i.e. iPhone 5s, iPhone 6 Plus, iPad Air, etc.

Do you see the same issue on the Syntax demo sites:

https://syntaxdemo.wordpress.com/

https://wp-themes.com/syntax/

Thanks for your help.

I’m using Safari on iPhone 5s, iOS 8.1.1.

I see a big gap in https://wp-themes.com/syntax/ but the version on https://syntaxdemo.wordpress.com/ is perfect, without any horizontal shift!

Thank you too.

Thanks for testing the demos.

I’m seeing the gap on https://wp-themes.com/syntax/ on my iPhone 5s as well, so I’m going to report this to our developers so they can investigate. We’ll keep you posted here.

Ouroboros, I’m having the same issue that you had here. I see you solved this problem because if I now go to your site (https://ouroboros.marconoris.com/), I don’t see the horizontal scroller. How did you get rid of that?

Hei Stylep,

I removed the horizontal scroller using this meta in header.php

<meta name="viewport" content="width=device-width, initial-scale=1" />

(if I remember correctly replacing the default one) and putting this class in my custom CSS:

html {overflow-x: auto;}

I hope this helps!

Thanks a lot! One more question, how do you add that class to the CSS file? Or is there a place in the theme to simply add custom CSS?

Yes, there is a place in WordPress left column admin menu, under “appearance” > “edit CSS”.

Hi!
Are you referring to editing the style.css file? If yes, where should I add that custom class in the CSS?
Thank you!

Hi ??

i’m sorry i forgot, you have to install Jetpack plugin to activate a custom css under “Appearance > edit CSS” menu. if you don’t know CSS maybe it’s the best solution.

Ohh! That explains why I didn’t find it. Thank you so much!

It’s pretty annoying, but even after activating the Jetpack plugin and adding that custom CSS, the horizontal scroller is still visible on my site… I replaced the viewport in the header.php too like you said. Very disturbing.

Can you post the address of your site?

Sure, it’s here.