Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Mobile website container width

  • 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:

  • 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 Block

    switch to mobile preview.
    Select Container Block #1 and in Layout set the Column Gap to 0
    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)

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.