Understanding responsive breakpoints in MaxiBlocks

MaxiBlocks uses a custom grid system with Flexbox and six responsive breakpoints - https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox. This provides flexibility similar to CSS grid, tailored specifically for responsive design. This guide explains how to create pages that look great on any display device.

Breakpoint basics in MaxiBlocks

MaxiBlocks offers six responsive breakpoints for different screen sizes:

1. XXL (4K): 1921px - 3840px, Row max-width 1690px
2. XL (Desktop): 1367px - 1920px, Row max-width 1170px
3. L (Laptop): 1025px - 1366px, Row max-width 90%
4. M (Tablet): 768px - 1024px, Row max-width 90%
5. S (Large mobile): 481px - 767px, Row max-width 90%
6. XS (Small mobile): 320px - 480px, Row max-width 90%

The max-width setting on Row Maxi foundation blocks nested within full-width Container Maxi blocks determines a pattern's layout width. Default max-widths ensure consistency but can be customised per block as needed.

Flexbox responsive breakpoints connect to Containers, Rows, and Columns to control the layout at different screen sizes.

The Flexbox responsive nesting structure is:

<container>

<row> (horizontal) - set column gaps (screenshot 1)

<column> (vertical) - set column size/width (screenshot 2)

</column>

</row>

</container>

</refactored>

Setting row gaps (block sidebar)

Setting column size/width (block sidebar)

Tip: Hover over each breakpoint icon in the editing experience to see the exact pixel dimensions. The orange teardrop marker indicates your detected screen size in the editing experience. (Screenshot 3)

How breakpoints work

• Inheritance: Styles cascade from larger to smaller breakpoints. Changes made at a larger breakpoint automatically apply to smaller ones unless overridden.
• Independence: Adjustments made at smaller breakpoints don't affect larger ones.

Best practices for responsive design

1. Start big: Begin your design on the largest breakpoint (XXL for 4K screens).
2. Work your way down: Systematically click through each smaller breakpoint.
3. Review and adjust: At each breakpoint, scroll through your page and make necessary adjustments.
4. Save strategically: Only save your page after checking and refining all breakpoints.

Important!

• Open panels like the document view (screenshot 4), block inserter (screenshot 5) , and block settings sidebar (screenshot 6) can affect the detected breakpoint. Settings created for one breakpoint with panels open may not apply when testing without those panels, as you could be in a different breakpoint unknowingly.
• Closely monitor the current breakpoint while working and close unused panels to ensure your detected screen size aligns with your intended testing size.

We are continually trying to improving this experience. Please email us with any suggestions!

Using the pattern library

MaxiBlocks provides a comprehensive library of over 2,000 pre-designed, responsive patterns optimised for all breakpoints. This valuable resource can help you create responsive designs more efficiently:

1. Learn from existing patterns: Load patterns similar to your project and deconstruct them to understand responsive design techniques.
2. Copy and customise: Use library patterns as a starting point and tailor them to your specific needs.
3. Pre-tested responsiveness: MaxiBlocks Pro library patterns are pre-tested for responsiveness across all breakpoints.
4. Recheck after modifications: If you modify columns or rows in a pattern, always re-verify responsiveness at each breakpoint.
5. Building from scratch: When using MaxiBlocks foundation blocks, you are responsible for all responsive optimisation, just like the MaxiBlocks library development team does when creating and testing cloud library patterns.

Using the responsive grid system

MaxiBlocks features a custom CSS grid fully integrated with containers, rows, and columns, supporting 6 responsive breakpoints from 4K down to 360px. Flexbox is also implemented for additional layout flexibility.

To use the responsive grid effectively:

1. Edit visually, then change the view (XXL, XL, L, etc.) and make adjustments for each breakpoint.
2. When you save and publish the page, the CSS is automatically created for the front end.
3. Values you set carry down automatically from high to low breakpoints to save time, but not from low to high. Always design responsive from desktop (high) to mobile (low) for best results.

4. Style cards have adjustable global defaults for consistent design across your site.

   

Matching other block widths

If you need to match the width of MaxiBlocks elements (like heroes) to other blocks on your page:

1. Select the MaxiBlock container in the editor.
2. Navigate to margin and padding settings.
3. Adjust the max-width to match your desired width (e.g., 1200px for Kadence blocks).
4. Update and save your page.

Additional resources

• Video Tutorial: Responsive Grid
• Video Tutorial: Flexbox
• Full MaxiBlocks Tutorial Playlist

By mastering MaxiBlocks' responsive breakpoints and using its extensive pattern library, you'll create beautifully adaptive designs that shine on every screen size. Happy designing!