[Resolved] Mobile Viewport Issue

[gedosan]

Hi guys,

I have a problem with my mobile viewport. I’m getting this issue:

Your page width (417 px) is larger than your viewport (412 px), so users will need to scroll horizontally to view some elements.

Any idea how I fix this please?

Thanks

[David]

Hi there,

this generally happens because an element on the page has been given padding or some odd margins and is quite common with page builder content. Its generally better to find the elements causing the issue and correct them but that can be painstaking… the easier fix is to use this CSS:

html, body {
    overflow-x: hidden;
}

[gedosan]

Hmmm, tried that and no luck. I’ve already worked out the cause actually, it’s the sidebar featured post widget. However much I tweak the width of that widget or play with the GP container dimensions, I can’t remove the issue. Any more ideas?

Thanks

[David]

This CSS relating to the widget is the cause:

.pt-cv-colsys {
    margin-left: -15px;
    margin-right: -15px;
}

If you can’t remove that then override it with:

.pt-cv-colsys {
    margin-left: 0;
    margin-right: 0;
}

[gedosan]

Worked a charm, thanks as ever for the awesome support.

G

[David]

You’re welcome, glad to be of help.

[Author]

Posts