[Support request] Mobile viewport won't stay still and shows slight margin on right hand side.

[James]

I’m testing my site on an iphone using safari and chrome. Using GP premium with a fairly modified “Navigator” theme. The site has a margin on the right hand side which is about the width of the scroll bar. Also, when I scroll up and down the page, the container moves and doesn’t snap back to its original position too easily. Any ideas what might be causing this?

[David]

Hi there,

can you share a link to your site so i can see the issue?

You can edit your original topic and use the Site URL field to share the link privately.

[James]

Hi David, I have now updated with the link.

[James]

EDIT

[James]

Any ideas how I can solve this?

[David]

You have a coming soon enabled – any chance you can disable that ?

[James]

Hi there – sorted it

[David]

Glad to hear that 🙂

[James]

Hi,

No I mean I removed the “coming soon page” the original problem still persists!

I’ve tried to use “touch-action: none” but that didn’t work. I’ve also tried to hide overflow on both X and Y axis and that didn’t work either.

It’s something to do with the pinch and zoom. I can basically “disrupt” the position of the right hand side of the site just by moving it on my phone. The left hand side snaps back to position as it needs to, the right hand side leaves a visible margin as in the screenshot above.

[David]

Aah my bad – thought you had fixed it.

So quite a lot of things at play, from plugins and custom CSS.
First there is Yellow Pencil CSS – that needs removing:

body {
    margin-right: -5px;
}

The other issues are related to the UAGB plugins CSS and Custom CSS attached to it. So rather then unpick all that try adding this CSS:

html, body {
    overflow-x: hidden;
}

[James]

Yes, I added both of these and it seems to work!

Thanks

[David]

You’re welcome

[Author]

Posts