Adjusting Columns on different devices

Visual Editor Help
1

Hi

I want to create a section with 4 columns ( containing a combination of image and product boxes) on desktop. How can I show it as 3 columns on tablet and 2 columns on mobile.

Additionally, is it possible to maintain equal column heights. For example I would like to have an image in column 1 with product boxes in columns 2,3 & 4. How can I make the image have the same height as the product boxes.

My builder page is here - Builder.io: Drag and drop page builder and CMS

Regards
HJ

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e.g. builder.io/content/4cab34394e684fe7b93d6ef5493a8a51

Builder public api key
go to Builder.io: Drag and drop page builder and CMS and copy your PUBLIC api key

What are you trying to accomplish
e.g. I want to integrate builder on a landing page

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

2

@zoomlite It looks like you are using the column Builder element, which currently doesnt support setting column width / wrapping of items. I would suggest for your setup 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 widths for desktop/tablet/mobile to achieve the exact look you are going for.

You can see more on responsive design here:

Hopefully that helps, let us know if you have any further questions