Tabs flex layout

Visual Editor Help
1

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
Screen Shot 2022-05-02 at 3.28.00 PM686×700 115 KB

2

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

3

Hey @cranetrain!

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

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

    .builder-tabs-wrap{

        flex-direction: column!important;

    }

}
2 Likes
4

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
Screen Shot 2022-05-04 at 3.54.46 PM970×414 40.6 KB

But not if the background has a color

Screen Shot 2022-05-04 at 3.55.10 PM
Screen Shot 2022-05-04 at 3.55.10 PM962×480 68.6 KB

Is there an easy fix for this as well?

5

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 :technologist:

1 Like
6

Thanks so much! Think that this is it here

7

Here’s the CSS I added to the page:

.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 :slight_smile:

2 Likes
8

You’re amazing! Thanks so much.

9

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?

10

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!

1 Like
11

This is good but in my account of builder.io there is no option for the tab how i will enable it please guide me