[Support request] Trying to understand padding

[Lina]

I’m trying to really understand how padding works in the WordPress blocks – in this case, I’m using Generate Blocks.

Here’s what I don’t get: on this page, the first container (the header block on the left hand side with the text) has the same exact padding as the 3rd container (the one titled “The history and location of our firm”).

On a desktop, they both appear to be aligned similarly. On mobile, the first container content (in the header) shrinks to a tiny, indecipherable size. Why is this?

Thank you kindly

[Lina]

Also, if anyone has any resources they could share on learning more about how padding works, I’d love to take a look. What I’m always having problems with is making sure that the padding looks good for both mobile and desktop. For some reason, I haven’t gotten the hang of this yet. Thank you again.

[David]

Hi there,

so the Container Block has responsive options, Desktop, Tablet and Mobile.

On Desktop, both of those Containers have the same Padding.
But if you switch to the Tablet view, you will notice the “History” block has a different tablet padding.

But…. it looks like you’re using Padding to contain the content.

I would do the following:

1. remove the high left and right padding values from your grid container blocks.
2. select the parent Container Block that contains the grid and set its Inner Container width to Contained and set a max width.

This will stop your content from filling the width of the container without using padding.

3. Add back any Padding where required in the Grid Containers

[Lina]

Thank you for the suggestions, David. I’ve been playing around with the padding settings now, and I have much more control over the layout. Thanks again!

[David]

Glad to hear that

[Author]

Posts