Hello. I have vertical tabs set up, but I want them to change to horizontal (or stacked on top of each other with content below each tab) on mobile. How can I make this happen?
Can you please add following CSS to fix vertical tabs turn accoridon in small screen.
@media screen and (max-width: 600px) {
.tabs-container {
width: 100% !important;
}
.ui-tabs-vertical .tabs-content {
padding: 1em;
float: none;
width: 100% !important;
padding: 0;
}
.ui-tabs-vertical .tabs-content p {
padding: 10px;
}
}
Regards
Thanks for the reply. This kinda worked – the vertical tabs turned accordion, but all the content is at the bottom of all the tabs, rather than the content for each tab showing underneath each tab. Is there a way to make the content for each tab show directly under it on smaller screens?
Welcome to our forum.
For the small screen tabs will turn as accordion. please see the screenshot
http://imgur.com/a/tMe7i
Regards
Can you please check my new answer, please try CSS I wrote for you.
Regards
Hi, thanks for your reply.
My tabs don't turn on small screens – how can I make this happen? What settings do I need in place? Will this work if the tabs are set to vertical?
Hello. Are you able to help with my above query (Aug 31 2017 06:26 PM)? Thanks!