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.