Archived topic
Adding padding to left & right in Mobile
5 replies · Started by Thushara on July 17, 2022
Hi guys,
I want to add padding left & right padding to the mobile view. I want to add it site-wide so I don't have to add it for each container. I know the theme customizer has an option for that. But I am using an Element that makes all pages Full Width and no padding. I think because of that customizer stylings are not working. How can I add site-wide left/right padding to the mobile view?
Thanks
Hi Thushara,
Yes, the padding in the Customizer doesn’t apply because of the Layout Element you have.
If you want to add paddings specifically for Mobile, we can try adding it through CSS.
Can you provide the link to the site in question?
You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Hope to hear from you soon.
Thanks, it's in a local environment. Could you show me how to add or send me a CSS code?
Hi there,
when you say Container - do you mean Container Blocks added to the editor? Or is this the Theme container ?
Container Blocks added to the editor. But adding padding to each container is not an ideal solution. I want to add left/right padding to pages globally. (For Mobile Devices)
You can use the following generateblocks_defaults filter:
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;
} );You can remove the ones you don't need.
