Customizing layout of tabbed content for mobile

[khale]

We are using tabbed content on a custom CTGY page along with custom category fields to populate the tabs. The default behavior of the tabs when you get down to a mobile viewport is to stack on top of each other, which means scrolling down to see the additional tab headings. We'd like to have the tab headings line up next to each other like they do in a desktop viewport. We will only ever have three tabs and the headings are short enough to fit within the mobile width side-by-side, so it shouldn't pose any issues there. I'm struggling to understand the code changes to make this happen.

Would anyone have insight on how I can accomplish this?

Thanks!

[Matt Zimmermann]

Hi Kelly,

You could try adding this to your theme-styles.css file. You may need to do some massaging, but it should get you started.

        .x-flex-tabs:not(.x-flex-tabs--accordion) .x-flex-tabs__tab {
            /* let tabs scale to fit multiple on each row */
            width: auto;
            /* shift all tabs to appear before content */
            order: -1;
        }
        .x-flex-tabs:not(.x-flex-tabs--accordion) .x-flex-tabs__tab:not(:first-of-type) {
            margin-left: 2em;
        }

[khale]

Thanks Matt! That worked perfectly.