[Resolved] Padding on mobile

[Jamshed]

We are using ‘content container’ as ‘contained’ for our posts, and the page appear nice on desktops.
https://empire-state-building.co/how-to-reach/

However, on mobile the same url doesn’t look nice (the content sticks to edges of the screen – https://ibb.co/HKyLrC7 ). How can we add padding on mobile?

[David]

Hi there,

the Content Container options – whether it be Contained or Full Width, will remove the themes padding, which is why you see the content stick to the viewport edges on smaller screens.

Why are you setting it to Contained ? When Default should do what you need without the above issue ?

[Jamshed]

Hi David, Yes, you are right. The ‘Default’ for all does the trick. Thank you.

However, now I notice one more issue – please see our home page and a post page on mobile.

https://empire-state-building.co/
https://empire-state-building.co/how-to-reach/

On post pages, there is a huge gap between the header and the Featured image, which doesn’t exist on desktop.

Yet again, thank you for your help.

[Ying]

Hi there,

The padding is from the setting at customizer > layout > container > content padding.

As the homepage’s content container is set to contain, it removes the theme paddings from the content container.

But the post’s content container is set to default, it keeps the padding.

You can adjust the padding for mobile by clicking the mobile icon 🙂

[Jamshed]

Thank you Ying. That solves. 🙂

[Ying]

You are welcome 🙂

[Author]

Posts