-
I want to adjust the container width for the mobile website and in an already closed topic you suggested this:
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;
} );But where can I find the location to add this?
Thank you!
-
Hi there,
You can use one of the methods introduced in below article:
https://docs.generatepress.com/article/adding-php/ -
Hi Ying!
Thank you for the quick reply. I installed the Code Snippet plugin and added the PHP Snippet, but it still doesn’t do to the website what I want it to do.
Our website has a container on the homepage with four Images/photo’s. On the desktop layout it shows them nicely on a horizontal row, but on the mobile website, they stand on top of each other (vertical). I would like to create a “block” of 2 x 2 images on the mobile website (like the Best Selling Kits in the Emerald pre-designed website).
I simply can’t figure out how to create this for my website.
-
Hi there,
open the List View in the editor to see the layout.
That section will look something like this:Container Block #1 ---- Container Block ---- ---- Image Block ---- Container Block ---- ---- Image Block ---- Container Block ---- ---- Image Block ---- Container Block ---- ---- Image Blockswitch to mobile preview.
Select Container Block #1 and in Layout set the Column Gap to0
Then Shift + Click each of the Inner Container Blocks to select ALL 4 of them. And in Sizing > Widths set it to 50%.If you need to keep the Column Gap eg. if it were 20px.
Then the Width of the inner containers would need to be set to:calc(50% - 10px)
- You must be logged in to reply to this topic.