Tabs get cut off in mobile

[Lifestylez]

Hey Guys!

Loving the new TABS Element. The only issue I’m having is when on mobile you need to slide left and right to see all the individual tabs that are available. How can I make the individual tabs stacked top to bottom on ONLY mobile?

Thanks for your help! See attachment for reference.

Best,

Nate

[nabeel]

Hi there,

Thanks for writing in! This is the intended behavior of the Tabs element however you can do it with the custom CSS, try adding the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .x-tabs-list li, .x-tabs-list ul, .x-tabs-list li button {
        display: block !important;
        flex: none;
        width: 100%;
    }
    .x-tabs-list li {
        width: 100% !important;
        text-align: center !important;
    }
}

Please note that the code provided above serves as a guide only and is to help you in getting started and is not a part of Tabs element so we’ll not be able to provide support for any issue arises due to the above code.

Thank you for understanding!

[Lifestylez]

@Nabeel

@media screen and (max-width: 767px) {
.x-tabs-list li, .x-tabs-list ul, .x-tabs-list li button {
display: block !important;
flex: none;
width: 100%;
}
.x-tabs-list li {
width: 100% !important;
text-align: center !important;
}
}

Seems to work great! Thank you!

[friech]

We are delighted to assist you with this.

Cheers!