What are you trying to accomplish
We need to have dynamic columns in builder.io based on the screen size
3 columns when the screen width is greater than 1599 and 2 column when the screen is less than 1599.
Guide us how to acheive it
Code stack you are integrating Builder with
Hi @samnagaraj, and thank you for contacting Builder.io Forum!
Builder column block is automatically responsive for each breakpoint and adapts to any screen size by default.
- Getting Started: Step 2 - Builder.io
- Adjusting Column Behavior - Builder.io
- Using Columns to Build Responsively - Builder.io
- How to Make a Multi-column Section - Builder.io
For your scenario, you want different layout for each breakpoint. There’s multiple way to achieve this:-
Easy way to use Builder column block separately for each breakpoint with required layout and set device visibility to each in style tab. Refer this doc: Builder best practices - Builder.io for hiding a block.
Another way, you change the wrapper component to Grid or Box and then use CSS Flex-Box to achieve what you are going for. You can then use responsive styling to set the column layout for desktop/tablet/mobile to achieve the exact look you are going for.
Let us know if you face any issues while achieving this!
Thanks for your reply,
We need more than 3 default breakpoint. Let us know how to setup?