[Resolved] Mobile pages not showing correctly

[Renske]

Hi there,

Some pages on mobile are not showing correctly (text with too small, words are cut off).

https://ibb.co/rwKGsTB
https://ibb.co/Q8vJsxC
https://ibb.co/vqsQJNF

How do I fix this? Seems like I made a mistake with container width or something like that?

[David]

Hi there,

can you share a link to a page where i can see the issue ?

[Renske]

Sure, see private info.

[Ying]

Hi Renske,

You can set the page’s content container tofull-width orcontainedas per your liking using the layout metabox:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it

You can learn the differences between full width, containedand default:
https://docs.generatepress.com/article/content-container/

[Renske]

Awesome, thanks! 🙂

[Ying]

No problem 🙂

[Renske]

Another question: I want to create a layout element to use globally and I’m choosing ‘contained’. How do I know how much padding to add?

[Renske]

Hi Ying, you’ve closed the topic, but I’ve got another question. See above 🙂

[Ying]

How do I know how much padding to add?

It depends on your design. You can add paddings to each individual container block for different devices according to your design 🙂

[Renske]

Hi Ying,

The container width lay-out element I created still isn’t working and I don’t understanding what I’m doing wrong. See Loom video + example of pages in private info.

[Fernando]

Hi Renske,

Upon checking the two links you provided, I was able to see that these page both had the same value for max-width(1200px).

Kindly see: https://share.getcloudapp.com/L1uW2LGQ

See: https://share.getcloudapp.com/mXuJNk8r

It appears that the Content Width set through the Layout Element works as it should from my end.

Moreover, with regards to mobile view, the difference in look between the two pages is because of the spacing set on the two.

Kindly see: https://share.getcloudapp.com/d5uNQG8r

See: https://share.getcloudapp.com/BludmrgN

The first linked page has a padding of 120px for top and bottom, and 30px for left and right on the outer-most/parent Container.

On the other hand, the Grid which hold all other elements for the second page only has a 50px left padding and a 50px bottom padding.

With that said, can you try making the spacing of the two identical?

Hope this helps! 🙂

[Author]

Posts