Responsive Tabs / Posts /

How to display all tabs in smaller screen such as mobile phone?

16
I do have one issue. When the client display is small (e.g. on a smart phone) and there are too many tabs to display I find that some of the tabs are not visible at all. 

I would like either the tabs to extend to multiple rows or for the text in tabs to wrap around to ensure that all tabs are displayed.
David  9 years ago   viewed: 21342    

2 Answers

1
Good question! I hope one the following solutions will resolve your issue.

Solution#1: 
Wrap the mcTabs with a div and give the div a min-width (e.g.  .mcTabsWrapper { min-width: 600px; } ) so that the mcTabs will always have enough space to list the tabs. 

Solution#2: 
(Suppose that the tabs have no enough space when the screen is smaller than 600px. Add the following styles to the bottom of your mctabs.css)
@media only screen and (max-width: 600px) { ul.mctabs li a { padding:0 2px; font-size:10px; } }

Solution#3: 
If solution#2 still cannot make it, we have to give each tab a fixed width and the tab text can wrap within the tab.
Add the following styles to the bottom of your mctabs.css
@media only screen and (max-width: 600px) { ul.mctabs { height:auto; } ul.mctabs li a { width:64px; } }
Milo   9 years ago
0

<ul id="tabs1" class="mctabs" style="min-width:320px;;display:inline-block">

<ul id="tabs1" class="mctabs" style="min-width:320px;;display:inline-block">
Scott Pendleton   9 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: