# Tabs flex layout

**URL:** <https://forum.builder.io/t/tabs-flex-layout/2104>\
**Category:** Visual Editor Help\
**Tags:** styling\
**Created:** [May 2, 2022, 7:44pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104 "2022-05-02T19:44:09Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![cranetrain](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@cranetrain](https://forum.builder.io/u/cranetrain)\
**Post date:** [May 2, 2022, 7:44pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/1 "2022-05-02T19:44:09Z")

</div>

This is hopefully really dumb … but I can’t figure out how to make the tab headers flex-responsive when they on mobile.

What I’d like to do is use the Tabs Layout, but instead of have a slider if there are multiple tab headers on mobile, have the individual headers stack on top of each other. Is that doable with the current Tabs layout and I’m just missing how to do that?

 ![Screen Shot 2022-05-02 at 3.28.00 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/44b2b378ec410a7bd3596ade67df1c6e04b58724.png)

---

<div class="post-metadata">

**Author:** ![cranetrain](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@cranetrain](https://forum.builder.io/u/cranetrain)\
**Post date:** [May 3, 2022, 11:38am UTC](https://forum.builder.io/t/tabs-flex-layout/2104/2 "2022-05-03T11:38:27Z")

</div>

I guess is there a way to change the tab headers from “row” to “column” flex that I’m not seeing?

---

<div class="post-metadata">

**Author:** ![logan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/logan/32/5564_2.png) [@logan](https://forum.builder.io/u/logan)\
**Post date:** [May 3, 2022, 6:49pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/3 "2022-05-03T18:49:28Z")

</div>

Hey @cranetrain!

The following CSS will do the trick! Just head to Data \> Edit Content JS + CSS and paste this in.

```auto
@media only screen and (max-width: 600px) {

    .builder-tabs-wrap{

        flex-direction: column!important;

    }

}

```

---

<div class="post-metadata">

**Author:** ![cranetrain](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@cranetrain](https://forum.builder.io/u/cranetrain)\
**Post date:** [May 4, 2022, 7:56pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/4 "2022-05-04T19:56:31Z")

</div>

That was incredibly helpful! Thanks so much for that.

A follow up question is that when I take change the background color of the tab headers so they look more like a button, then the “Active Tab” settings don’t seem to apply. Is there a simple fix for that as well?

For example, the default “active tab” color is gray which shows up if the background color of the text is clear

 ![Screen Shot 2022-05-04 at 3.54.46 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/a27acdc8ab016266f6665b5a51ded57fd851b2b7.png)

But not if the background has a color

 ![Screen Shot 2022-05-04 at 3.55.10 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b841bb7e04e4432ff46e24412ee5820e6fb13632.png)

Is there an easy fix for this as well?

---

<div class="post-metadata">

**Author:** ![logan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/logan/32/5564_2.png) [@logan](https://forum.builder.io/u/logan)\
**Post date:** [May 4, 2022, 8:33pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/5 "2022-05-04T20:33:50Z")

</div>

I recall that there’s a trick to getting this to work… can you grab the link to this block (right-click and choose “Copy link to block” in the Editor) and reply with it? I will take a look 🧑‍💻

---

<div class="post-metadata">

**Author:** ![cranetrain](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@cranetrain](https://forum.builder.io/u/cranetrain)\
**Post date:** [May 4, 2022, 8:47pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/6 "2022-05-04T20:47:40Z")

</div>

Thanks so much! Think that this is it here

> **[Builder.io: Drag and drop page builder and CMS](https://builder.io/content/2a78acc75a874381be017890755d770d/edit?activeDesignerTab=0&selectedBlock=builder-01bc0572c38d49f2b27903a5ceb3c1c3)**
>
> Build and optimize digital experiences for any tech stack, visually.

---

<div class="post-metadata">

**Author:** ![logan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/logan/32/5564_2.png) [@logan](https://forum.builder.io/u/logan)\
**Post date:** [May 5, 2022, 5:54pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/7 "2022-05-05T17:54:14Z")

</div>

Here’s the CSS I added to the page:

```auto
.builder-tab-wrap{

    background-color: #6fa384;

} 

.builder-tab-active{

    background-color: #1A5632!important ;

}

```

Feel free to change the colors up from here, but you now have control over the active vs standard colors 🙂

---

<div class="post-metadata">

**Author:** ![cranetrain](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@cranetrain](https://forum.builder.io/u/cranetrain)\
**Post date:** [May 5, 2022, 7:05pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/8 "2022-05-05T19:05:28Z")

</div>

You’re amazing! Thanks so much.

---

<div class="post-metadata">

**Author:** ![cranetrain](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@cranetrain](https://forum.builder.io/u/cranetrain)\
**Post date:** [May 21, 2022, 3:05pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/9 "2022-05-21T15:05:14Z")

</div>

Hi Logan,

Follow up on this, is it possible to include liquid inside the tab layout?

What I’d like to have is each tab pull up a different set of blog articles from Shopify based on their tags.

- Tab 1 → blogs articles with “tag1”
- Tab 2 → blog articles with “tag2”

I thought that this would be pretty straightforward using the tabs and some liquid code, but none of the liquid seems to work when it is in the tab structure.

Any advice/thoughts on this?

---

<div class="post-metadata">

**Author:** ![logan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/logan/32/5564_2.png) [@logan](https://forum.builder.io/u/logan)\
**Post date:** [May 23, 2022, 12:17pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/10 "2022-05-23T12:17:12Z")

</div>

Hi @cranetrain, would you mind recreating this on a content entry / page somewhere so I can see it in action? I’ll just need the link to the content.

Thanks!

---

<div class="post-metadata">

**Author:** ![abd](https://avatars.discourse-cdn.com/v4/letter/a/c6cbf5/32.png) [@abd](https://forum.builder.io/u/abd)\
**Post date:** [October 2, 2024, 12:33pm UTC](https://forum.builder.io/t/tabs-flex-layout/2104/11 "2024-10-02T12:33:26Z")

</div>

This is good but in my account of [builder.io](http://builder.io) there is no option for the tab how i will enable it please guide me