Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 30, 2014 at 5:38 pm #272502
    tma8

    Hi there,

    I have a tabs element (4 tabs) within a 2/3 column. Everything is groovy until you resize the window. When it gets smaller (say a 768px screen for iPad), one of the tabs gets pushed to a new row since there’s not enough space for all 4 tabs to go side-by-side. How can I force the tabs to go into “mobile view” (so tabs are stacked vertically like accordions) on 768px @media queries?

    Any help would be appreciated.

    Thanks!

    May 30, 2014 at 10:25 pm #272621
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (max-width: 1024px)  {
	.responsive .tabcontainer{border-width: 1px; border-style: solid; border-top:none; overflow: hidden;}
	.responsive .tabcontainer .tab_titles{display:none;}
	.responsive .tabcontainer .tab_content, .responsive .tabcontainer .tab
	{width:100%; max-width:100%; border-left:none; border-right:0;left:0; top:0; min-height: 0!important;}
	.responsive .tabcontainer .tab_content{border-bottom:none; padding:15px 30px; clear: both; }
	.responsive .tabcontainer .tab.fullsize-tab{ display:block; margin-bottom:-1px;}
	.responsive .top_tab .tab.fullsize-tab{ margin-bottom:0px;}

}

    Cheers! 
    Josue

    May 31, 2014 at 12:13 am #272681
    tma8

    Thank you Josue! Your CSS works fine.

    Cheers

    May 31, 2014 at 12:25 am #272683
    Josue

    You are welcome, glad we could help :)

    Regards,
    
Josue

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Make Tabs display in mobile view on 768px’ is closed to new replies.