Change how tabs show in mobile

[tdspezia]

Hi guys,

I need to change the way the tab bar shows on mobile.
This is the page I am referring to:
https://www.betterthancoffee.com/products/

On mobile to access the next tabs you have to scroll towards the right, which makes it easy to miss the tabs.

How can I have the tabs on top of each other on mobile only (desktop is currently set with tabs to be selected - works well)

See what those guys did:

100% Grass-Fed Beef Jerky Sticks | Paleo, Whole30

We want the same as they did desktop and mobile.

Thank you

Val

[friech]

Hi Val,

Thank you for writing in, please use the Classic Tab element instead, it will behave the same way as on the https://chomps.com/ in desktop and mobile.

Cheers!

[tdspezia]

Hi Friech

ok thank you I will try & use the classic tab and create the full element again.
However this creates an extra challenge as I recently moved to the latest X upgrade from a 5 something version.
I need to configure the tabs quite a lot and because of another issue with the tab currently live (another support case is open/ bug in the backend) I cannot copy/paste the html I have already.
It doesnt seem to have any option to ad media in the tabs…
Is the only way to have the html and copy/paste in the text field?
This seems to be very time consuming…and I am sure I am missing something here, right?
i am not a coder but i do understand enough html to copy and modify slightly… not to create from scratch to include images.
Hope I made sense
Thank you

[paul.r]

Hi Val,

To make it on top of each other in mobile.

You can try adding the code below in Theme Options > CSS

@media(max-width:979px) {
.x-tabs-list ul {
    flex-direction: column;
}
}

Hope that helps

[tdspezia]

Hi @paul.r just wanted to say thank you
we went down another path just now but i am under the impression this piece of code will become useful

[ruenel]

You are most welcome.
If you need anything else we can help you with, don’t hesitate to open another thread.