I do not know how to make the tabs display on mobile devices better. Now all the tabs are on top with far from each other and then it's not possible to understand the content. I attach a screenshot of how it looks on my mobile. Would you have an idea how to make it work better please?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.tabbed[data-alignment="center"] .wpb_tabs_nav li, .tabbed[data-alignment="right"] .wpb_tabs_nav li {
width: 100% !important;
}
.tabbed[data-style="minimal"] .wpb_tabs_nav li a {
padding: 5px !important;
}
}
With the CSS it should look like below screenshot :
Hello
I do not know how to make the tabs display on mobile devices better. Now all the tabs are on top with far from each other and then it's not possible to understand the content. I attach a screenshot of how it looks on my mobile. Would you have an idea how to make it work better please?
Can you provide the htaccess user pass ? .
Thanks
ThemeNectar Support Team
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) { .tabbed[data-alignment="center"] .wpb_tabs_nav li, .tabbed[data-alignment="right"] .wpb_tabs_nav li { width: 100% !important; } .tabbed[data-style="minimal"] .wpb_tabs_nav li a { padding: 5px !important; } }With the CSS it should look like below screenshot :
Thanks
ThemeNectar Support Team