Horizontal tabs
- trogladyte
-
Offline
Topic Author
- Platinum Member
-
- Posts: 751
- Thanks: 16
Horizontal tabs was created by trogladyte
Posted 6 years 5 months ago
Love the beautiful way these display mostly. However, in mobile views they lose a bit of their cuteness.. 
I understand the moving relates to the viewport, but is there a way we can still make them nice in smaller viewports?
I used to use Regular Labs tabs and sliders till I started using yours. In his tabs, when the viewport got too small he defaulted to stacked links.That was better but as plain links it was boring and lost the pizazz.
In the meanime (as these tabs are made in PB) I'm going to duplicate them as sliders and set the sliders to mobile view and the tabs to desktop, but it would be cool to have them adjust automatically.
Thanks again for your great products Ced; I've really enjoyed using them and also for the great support!
I understand the moving relates to the viewport, but is there a way we can still make them nice in smaller viewports?I used to use Regular Labs tabs and sliders till I started using yours. In his tabs, when the viewport got too small he defaulted to stacked links.That was better but as plain links it was boring and lost the pizazz.
In the meanime (as these tabs are made in PB) I'm going to duplicate them as sliders and set the sliders to mobile view and the tabs to desktop, but it would be cool to have them adjust automatically.
Thanks again for your great products Ced; I've really enjoyed using them and also for the great support!
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!
Please Log in or Create an account to join the conversation.
Replied by ced1870 on topic Horizontal tabs
Posted 6 years 5 months ago
Hi
you can try to add these css rules with mediaqueries to stack the items :
CEd
great thanks !I've really enjoyed using them and also for the great support!
you can try to add these css rules with mediaqueries to stack the items :
Code:
div.cktype .ui-tabs .ui-tabs-nav li {
display: block;
float: none;
}
div.cktype .ui-tabs .ui-tabs-nav .ui-tabs-anchor [
display: block;
float: none;
}
CEd
Joomlack Webmaster and Developer
Please Log in or Create an account to join the conversation.
Time to create page: 0.727 seconds
