# Turn desktop columns into mobile scroll-able columns

**URL:** <https://forum.builder.io/t/turn-desktop-columns-into-mobile-scroll-able-columns/1727>\
**Category:** Visual Editor Help\
**Tags:** visual-editor, styling\
**Created:** [February 7, 2022, 8:07pm UTC](https://forum.builder.io/t/turn-desktop-columns-into-mobile-scroll-able-columns/1727 "2022-02-07T20:07:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mw-everlane](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@mw-everlane](https://forum.builder.io/u/mw-everlane)\
**Post date:** [February 7, 2022, 8:07pm UTC](https://forum.builder.io/t/turn-desktop-columns-into-mobile-scroll-able-columns/1727/1 "2022-02-07T20:07:46Z")

</div>

**Builder content link**

> **[Builder.io: Drag and drop page builder and CMS](https://builder.io/content/ade753d2c8a34060b6ee2de3bf3556a1)**
>
> Build and optimize digital experiences for any tech stack, visually.

**Builder public api key**  
444142b2cae54a19aeb8b5ba245feffe

**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.

 ![Desktop - currently working](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/af69186fc79f4fb7254f01f1398e4296e9b0a2e3.png)

![Mobile Goal - or something like it](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b12d9150ea2c36e175fe87a3f8e389d54e930d39.png)

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](https://forum.builder.io/t/settings-for-scroll-child-layout/477/8), but was not successful. I feel like I might just be missing something basic about responsive design, but am definitely stuck for now.

 ![What I see on mobile](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/9314530f2a7a3f3fb97fac28970b5bcffbb7dd1a.jpeg)

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!

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [February 8, 2022, 6:32pm UTC](https://forum.builder.io/t/turn-desktop-columns-into-mobile-scroll-able-columns/1727/2 "2022-02-08T18:32:29Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e5f5bd21c5625fe0dfa7352781fc9f7fe9bd37c1.gif)

I have created a Fiddle with something similar her: [Builder.io: Drag and drop page builder and CMS](https://builder.io/fiddle/95e64f83b66649d9afce10e467714f47)

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

---

<div class="post-metadata">

**Author:** ![mw-everlane](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@mw-everlane](https://forum.builder.io/u/mw-everlane)\
**Post date:** [February 16, 2022, 6:14pm UTC](https://forum.builder.io/t/turn-desktop-columns-into-mobile-scroll-able-columns/1727/3 "2022-02-16T18:14:32Z")

</div>

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%.

 ![Result on mobile is still not working](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/203e41488b8f84c08b72388d1600a05ca0888a48.jpeg)

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

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [February 16, 2022, 9:57pm UTC](https://forum.builder.io/t/turn-desktop-columns-into-mobile-scroll-able-columns/1727/4 "2022-02-16T21:57:12Z")

</div>

@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 !

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [February 17, 2022, 12:05am UTC](https://forum.builder.io/t/turn-desktop-columns-into-mobile-scroll-able-columns/1727/5 "2022-02-17T00:05:07Z")

</div>

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!

 ![Screen Shot 2022-02-16 at 3.55.24 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/cad23e0c28825dbb7ae4e965d7f9ad36919508f1.png)
