Custom CSS for Tab Container

[Matty_Fenny]

Im trying to adjust the layout of the Tab Container so each tab is centered/spaced out evenly.

Here is my layout screen on mobile view (I’ve used custom CSS to set the background pink to show I’ve selected the correct part):

and here it is on the Desktop view:

I’ve labelled the Tab Container as “tab-options”.

and then in Custom CSS I have the following:

.tab-options div[class*="StyledTabsList"] {
background-color: pink;
}

I used “StyledTabsList” based on the following image:

I want to have the tab options either centered and spaced out more, or spaced evenly across the whole screen into 4 sections like it is in the mobile view. I’ve tried getting the class for each individual button (StyledTabsTrigger) and hovering over the text gives you StyledSpan2, but neither of these seem to do anything.

Thanks,

Matty.

[ThinhDinh]

You can try this.

.tab-options div[class*="StyledTabsList"] {
  display: flex;
  background: pink;
}

.tab-options div[class*="StyledTabsList"] > button {
  flex: 1 1 0;
  min-width: 0;
}

‎flex: 1 1 0; tells each button to:

• Grow (‎1): Each button can grow to fill available space.
• Shrink (‎1): Each button can shrink if needed.
• Basis (‎0): The starting size is 0, so all space is distributed equally.

This means no matter how many buttons you have, they’ll each take up the same amount of space.

[Matty_Fenny]

Thankyou! This has worked to an exent! It now does exactly what your example does. However, when the screen is in mobile mode, or desktop mode but in a small window, it either cuts the text short or auto-creates a dropdown to “show more”:

[ThinhDinh]

@Matty_Fenny

However, when the screen is in mobile mode, or desktop mode but in a small window, it either cuts the text short

I think this means we have to make the font size smaller.

.tab-options button span {
font-size: 0.8rem;
}

@Matty_Fenny

or auto-creates a dropdown to “show more”:

This is the component’s default behavior, we can’t override that.

[Himaladin]

You might want to experiment with different flex values like 1 1 auto, or even 0 0 auto depending on how much flexibility you want. This helps control whether tabs shrink, grow, or size strictly based on content.

[Matty_Fenny]

This worked, but when the window was small it still collapsed a bit. However, the suggestion you gave was the overall solution and @Himaladin suggestion of having flex set to 1 1 auto; topped it off. Thanks both of you this has been giving me a headache for days!

[Himaladin]

Hi, just to add a note:

Glide has actually anticipated long tab labels — if your tabs overflow the container, they become scrollable horizontally by default. So if you’re seeing tabs “collapse” or overflow, it’s often better to let that native horizontal scroll behavior handle it, especially for mobile or smaller windows.

Also, just be aware that overriding the flex behavior with custom styles like flex: 1 1 auto; can sometimes interfere with that intended scrolling, depending on parent constraints.

By the way — I accidentally came across a CSS trick that collapses overflowing tabs into a dropdown, which could be a nice alternative. I haven’t been able to replicate it reliably yet, but it’s something I might experiment with later when I have time.

Hope this helps clarify.

[Himaladin]

Just for fun:
You can force tab items to collapse into a hamburger menu while keeping only the first tab visible, as shown in the image below.
This CSS tweak is intended for desktop only:

#page-root:not(:has(.mobile-layer)) [data-orientation="horizontal"] > div {
  max-width: 280px !important;
}

Note: This method has only been tested in desktop view and may not work on mobile.