[Support request] stopping blocks in Grid block from squeezing when reducing screen size

[Katharina]

Hi,
I use the Grid block to create 3 columns with background image and text. When I reduce my screen size the word are separated and the columns to narrow. How can I set a limit to where it jumps from 3 blocks in a row to 2 block instead squeezing together.
Also if I change to mobile there is no gap in between the boxes using the spacing didn’t change anything.

I hope you understand what I am talking about.
website: https://dieheilefrau.de/

Thanks
Kati

[David]

Hi there,

the GenerateBlocks plugin has responsive layouts for Desktop / Tablet / Mobile.
You will see three separate tabs for each in the Settings sidebar when you select a block.

If you select a Grid Column block, and switch to Tablet you can set the columns to a different width eg. 50% / 50% / 100%.

For reference:

https://docs.generateblocks.com/article/container-overview/#grid-item

For the vertical spacing on the Tablet and Mobile. You will need to select the Grid Container ( the block that contains the columns ):

https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

Under its layout you will see an option for Vertical Gap.
Again select the Tablet view and add a vertical gap, then repeat this for Mobile.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts