[Support request] Page too wide on mobile screen

[innerfrench]

Hi guys,

There seems to be an issue with my homepage on mobile screens. It is too wide and shows a lot of blank space on the right.
On tablet there’s also a small gap on the right.

I’m using Elementor, all my sections are “boxed” and I have the GP “default template” for the page attribute.

I think it could be related to the css I added to reduce the size on the comment box, although I don’t have it on the HP:

@media (max-width: 1125px) {
#comments {
width: 240px;
margin-left: auto;
margin-right: auto;
}
}

Thanks in advance for your help.
Hugo

GeneratePress 2.2.2

[David]

Hi there,

i am seeing the issue on pages that don’t have the comments form so it can’t be ( just ) that being the issue. Some Elements on the page are overflowing the content width and its best if you can figure out which ones and fix them, but you can also use this CSS to block the overflow entirely:

html, body { 
    overflow-x: hidden;
}

In regards to your comments CSS it would be better to use max-width: 240px; instead of width: 240px;

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[innerfrench]

Found the issue. Thanks for your help, David!

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts