Force tabs into 2 rows on mobile

Support
#1

Hi team,

I’m using tabbed content and on mobile the tab list is too wide to fit on the screen. Instead of resizing, it’s creating a scrolling option.

How can I create 2 rows for the tab list instead of the scrolling?

#2

Hey @archerthefox,

Regretfully, there is no option to stack them on mobile. Luckily, it can be achieved using simple CSS. Insert this code in Tabs > Customize > Element CSS.

$el .x-tabs-list ul {
  flex-wrap: wrap
}

You can see the setup in this screencast https://youtu.be/v0LrSG5jiUA

Hope that helps.

2 Likes
#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.