[Support request] Tablet … Content Padding

[John]

Hello GP-Support !

I’m into Day 5 of using GP. I am not a coder. I love GP. Question:

Please see http://www.understand-culture.com. This is a text-rich site. The target device is mobile. Because it is text-rich it needs to be easy on the eyes on a wide screen and tablet. I want the container centered. My preference re: Content Padding is 400 on each side. However, see what it looks like on a tablet and/or shrink the width of the screen on your widescreen computer.

How can we solve this problem?

John

[David]

Hi there,

don’t use excessive padding to reduce the width of the container or you’re going to have a lot of issues 🙂
Instead do the following:

1. Customizer > Colors > Body and set this to white to match your content container.
2. Customizer > Layout > Container:
— set the container width to 1200px
— set the padding to some smaller values eg. 40px all round.
3. Optional – set the Customizer > Layout > Header – set container and inner container to Full Width – if you want the header to be wider then content.

[John]

Wow, that was a really fast response time, David. Thank you !

1. and 2. helped. However, the text looks really narrow on a tablet. I have the left/right padding at 350 each. I really don’t want to go any wider.

Any recommendations?

John

[David]

You don’t want to be using that level of padding – its going to cause you lots of issues, and would require custom CSS to negate it for the different screens sizes between desktop and mobile.

Why not just reduce the Container width to the maximum size you want it displayed?
For example setting it to 768px with 40px of padding all round will keep the Desktop and Tablet views the exact same width 🙂

[John]

That’s it … perfect, David. Thank you !

I suspect that I did not fully understand the setting. You folks at GP-Support are outstanding. Fast. Very helpful. Clear.

John

[David]

Glad we can be of help 🙂

[Author]

Posts