Responsive Tabs / Posts /

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

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  3 years ago   viewed: 14806    

2 Answers

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

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. 

(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; } }

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   3 years ago

<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   3 years ago


Your name*
(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: