[Support request] Content width and spacing on mobile isn’t correct

[Hugo]

Hi there,

On my site content pages have their width a bit funny on mobile, the content is too far to the left side. How do I adjust the width so that the content on the page is even.

Thanks.

[David]

Hi there,

you’re using a Full Width Content Container:

https://docs.generatepress.com/article/content-container/

the way that page is built, you don’t need full width – and you can set the Content Container to default

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

[Hugo]

Hi David,

Thank you for the reply.

I made all the pages layout defaut via elements. However I’m having a few mobile usability problems.

I ran it through the tester and I’m told stuff is too wide, content to small.
I’ve added the results of the URL below, wondering what the fixes would be.

[Ying]

Hi Hugo,

The page in question is set tofull width and in the same time, there’s a 900px content width set in layout element.
https://www.screencast.com/t/i2bPcGrwkqd

So on mobile, the text goes from edge to edge of the screen.

Can you go to appearance > elements, find the layout element that includes this page in its location, choose defaultinstead offull widthfor the content container option.

For the text too small issue, check this article, it should be helpful:
https://docs.generatepress.com/article/text-too-small-to-read-and-clickable-elements-too-close-together/

[Hugo]

Hi Ying,

GSC and the mobile friendly testing tool is still saying the pages have issues, with the following. Content wider than the screen, and clickable elements too close together.

I followed your suggestions however this hasn’t fixed it in GSC or the live testing tool.

[Fernando]

Hi Hugo,

I tried viewing your site, and I can’t seem to locate a Content that exceeds the screen. Exploring your site, the only which may be small in size and may be close together are the menu items generated from the menu in your footer. You might want to try modifying these.

You may also check the recommendations here: https://support.google.com/webmasters/answer/9063469#content_not_sized_to_viewport

However, it would also be good to note that sometimes, this Mobile-Friendly test may fail or may be inaccurate as mentioned here: https://support.google.com/webmasters/thread/7986432/content-wider-than-screen-mobility-error-while-live-test-says-mobile-friendly?hl=en#:~:text=Recommended%20Answer-,Recommended,-barryhunter

Hope this clarifies. 🙂

[Hugo]

Hi Fernando,
On my mobile phone the content is still too wide.

[Fernando]

Are you wanting to add padding? If so, you may go to Appearance > Customize > Layout > Container, set the view to mobile, and add paddings.

Example: https://share.getcloudapp.com/v1ug7Qgb

Hope this helps! If you’re referring to something else, kindly let us know. 🙂

[Hugo]

Hi Fernando,
The padding has no affect when I adjust it.

[David]

OK, we may need to take a step back on how you want this layout.
I do not see the issue on my mobile but the Align Wide option you are using on the Container Block can cause overflow.

How may pages do you have that are laid out in this same way ?

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

[Author]

Posts