Container Maxi block
Containers in MaxiBlocks are essential for creating page sections and customising your website layout. They are designed to house rows, columns, and blocks, and you can even nest additional containers inside each other, making it easy to build any page structure you desire.
To add a container, simply click the "Add Block" button and select the Container Maxi block. You'll then be prompted to choose the column layout you want for the row.
Containers require columns by default. Columns are linked with the custom CSS grid and responsive breakpoints. Whatever you place inside of a column will have responsive capabilities. You can easily change column count later.
Rows
By default, each container has at least one row. You can have multiple rows with different column layouts within the same container, giving you complete creative freedom to customise your website layout.
And if you change your mind about the column structure later, no worries! You can always go back and modify the row settings to choose a different column layout.
How to use the MaxiBlocks container for responsive web design.
Add a container
Select the columns
Toggle open the column picker settings
Set it to 11 and click apply setting
Enable repeater - this will allow all the columns to get the same styles
Select the column
Toggle open the column settings and set the column size to 50%
Add another row
Select 2 columns
In the first column add a text block and an image in the second column
Add your text and images to each block
To make all the images the same size. >> Select the image. >> Toggle open the dimension tab and select 3:2 image ratio
Select the container >> Select background layers >> Give it a colour
Select the base column
Toggle open the settings >> Select background layers >> Give it a colour
Select the top column
Set the padding to 35px
Adjust the dimensions to better fit. >> Select the image. >> Toggle open the dimension tab and select 1:1 image ratio
Toggle >> Advanced tab >> Flexbox
