[Resolved] Container width on mobile

[Angie]

Hello!
I am looking for a best practice how to setup the container width on mobile for a whole website in GeneratePress.
In the private information I shared a link where I am not satisfied, because the content has no space left and right.

In the costumizer I set the content padding to 30px (Layout > Container).
The Content Container Type of this post was automatically set to “default”, so I thought that the 30px padding should kick in…?

I need a solution where I don’t have to edit each single page, because I have often projects where I import a lot of pages, and editing each of them would be to much work.

This is something that I noticed in some projects in GeneratePress in the past and I then added costum CSS, but I wanted to know how this is intended to work…

Thank you, Angie.

[David]

Hi there,

if you work with the Themes Default Content Container:

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

Then the Customizer > Layout > Container –> Padding will apply.

However, if you use either the Container or Full Width Content Container, then the Themes padding is removed.

At this point you’re responsible for adding padding to the blocks you build your pages with.
As you’re using GenerateBlocks Contaianer Blocks you have some options, you can either:

a) Manually set the Padding in Container Blocks Settings.

b) You can set the Container Blocks default settings for any new container blocks you add using this PHP Snippet:

add_filter( 'generateblocks_defaults', function( $defaults ) {
    $defaults['container']['paddingTop'] = '60';
    $defaults['container']['paddingRight'] = '60';
    $defaults['container']['paddingBottom'] = '60';
    $defaults['container']['paddingLeft'] = '60';
    $defaults['container']['paddingTopTablet'] = '40';
    $defaults['container']['paddingRightTablet'] = '40';
    $defaults['container']['paddingBottomTablet'] = '40';
    $defaults['container']['paddingLeftTablet'] = '40';
    $defaults['container']['paddingTopMobile'] = '20';
    $defaults['container']['paddingRightMobile'] = '20';
    $defaults['container']['paddingBottomMobile'] = '20';
    $defaults['container']['paddingLeftMobile'] = '20';

    return $defaults;
} );

c). You can use some CSS to add padding, but this may adding padding to the themes parent container elements.

[Angie]

Hello David,
thank you. This helps. One additional question though:

You write:

However, if you use either the Container or Full Width Content Container, then the Themes padding is removed.

What exactly do you mean by this? Do you refer to the single container setting or to the layout settings for the single page as in the link you provided? As I said before the layout setting was set to “default”…

Sorry, I’m a bit lost here.

Thank you, Angie.

[David]

OK, in the Customizer > Layout > Container you can set the Themes main container Padding for Desktop and Mobile.
But if you change in the post editor the Layout > Content Container to Full Width or Contained then that padding gets removed.

[Angie]

alright, I understand and we are on the same page.

The issue is, that all posts have the container type “Default” because I wasn’t aware of that setting, so I never changed it. So this is why I’m wondering, why the padding from the Costumizer doesn’t apply on mobile.

[Ying]

It’s because you are using a block element - content template which removes the default post container.

Go to this block element, and toggle the Keep default post container option.

[Angie]

That was it!!
Thank you again!
Angie.

[Ying]

You are welcome 🙂

[Author]

Posts