Weird Gap on Mobile Version of My Page

[Muller]

Hello,

I’m using the Integrity 1 stack on a multisite and I have a weird problem. On the mobile version, I can scroll horizontally, which gives me a gap, that looks like this:

I use the X-Child Theme with custom styles, but it seems that it doesn’t have anything to do with that. When I switch to the parent theme, I still have the problem. I have this on all my multisite pages, which all use the Integrity 1 stack with an almost identical layout.

The problem occurs when using chrome and using the developer tools to turn on the mobile view. It also occurs on a smartphone using the chrome browser. I haven’t checked with any other browsers or devices yet.

Can you tell me what might be causing the problem?

Edit: I notice that the problem disappears, when I set the admin bar to display:none

[Prasant]

Hello @Muller,

Thanks for asking.

I suggest you to please make sure that Chrome is updated and that cache is cleared. I am unable to replicate the gap issue on my end. Please take a look at the screencast.

Thanks.

[Muller]

Thanks for your reply!

I checked if everything is up-to-date, which is the case, my Chrome version is 69.0.3497.100 (Official Build) (64-Bit) (cohort: Stable). Should be the latest version.

You need to have the exact same settings in Chromes mobile view as I have, otherwise it won’t show. I showed this to a friend and he first, too, couldn’t reproduce this, which was because he didn’t set the view to “mobile” at the very top, but had “responsive” instead. Also it doesn’t show on all devices. iPhone 5/SE will definitely show the gap.

Also when I access the page with my smartphone (Motorola Moto X Play) I get the gap.

Check out my settings in Chrome at the top:

Edit: It has something to do with something in the admin bar with the class screen-reader-shortcut, which is positioned with absolute and kind of leaves the boundaries of the mobile view area. I don’t know why exactly this is causing the problem, but I’ll try to fix it. Maybe you know a best practice for this kind of issue?

Edit2: I solved my problem with this CSS code:

#wpadminbar a:last-of-type {
  right: 0;
}

I don’t know if this has anything to do with the X-Theme or what this problem is, but maybe this will help someone. It makes it so that the last link item of the admin bar, which is a screen reader button, stays within the mobile view boundaries.

[thai]

Hi There,

It seems this issue is related the WordPress admin bar, I disabled it on the support account and I couldn’t replicate this issue anymore:

Thanks for sharing the solutions to resolve the issues.

Regards!