Turn desktop columns into mobile scroll-able columns

Builder content link

Builder public api key

What are you trying to accomplish
On desktop I have a columns component that is showing 4 columns across the top of the page. When I change this page to be mobile, I want those 4 columns to say intact. However, since mobile is of course less wide than desktop, I want those columns to be scrollable on mobile.

Mobile Goal - or something like it

I think this is the point of the child layout functionality, but on mobile, this functionality is grayed out. I tried to follow the tips in this help article, but was not successful. I feel like I might just be missing something basic about responsive design, but am definitely stuck for now.

I will send an email to help@builder with the preview link to use to see results of tinkering.

Thanks so much for any help you can provide!

Hey @mw-everlane !

I took a look at this page, for some reason the element stops showing up in tablet and mobile, and I couldn’t find a Builder style responsible for that, is that something coming from your app?

Because of this I wasn’t able to directly make any changes on your page, but you should be able to achieve this by setting the parent Box element to have a width of 100%, and then setting a min-width on the columns container to be wider than that, say like 1200px. Based on your other styling, it should work as is, but you can also play around with the width of the columns element and the individual column child elements to get the exact styling you want.
Feb-08-2022 10-33-52

I have created a Fiddle with something similar her: Builder.io: Drag and drop page builder and CMS

Check it out and feel free to play around with the widths, and let me know if this works for you!

Hi @TimG thanks for your quick answer, and apologies for my slow response.

I’m afraid that when I follow your instructions I am getting the same results.

I have set the width of the parent box to be 100%, and the min width of the columns component on mobile to be 120%.

Were you unable to see the mobile content even when you use the link I sent to Builder via an email? For me it loads right away

@mw-everlane, what email did you send to? I don’t think I saw any emails from you come through our support channel. Feel free to slack me or send as a DM in Forum as well, want to make sure I am looking at the same page !

We were able to solve in real time, but wanted to document here as well for posterity.

When using a Columns component, make sure to have the Stack Columns at: in Advanced Options set to never and you should be good to go!