<p dir="auto">Often I use some type of tabs widget on websites but usually on very small viewports (usually always around iphone portrait 320-380px range) it always ends up looking terrible since the tabs need to wrap on two lines and it just never looks good.</p>
<p dir="auto">Recently my solution has been to create a custom tab widget that when hitting a certain breakpoint will automatically change itself to show as an accordion widget. Accordions seem like a perfect substitute for tabs on these small viewports and would be a nice touch for making more of your widgets even more mobile friendly.</p>
<p dir="auto">On mobile devices you should show tabs as collapse component, not as a tab list, because you cannot show more than 2 tabs in a row on a mobile device anyway and it looks absolutely terrible.</p>
<p dir="auto">I attached a screenshot to demonstrate it. Even foundation 4 shows tabs as accordion.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/9fd02ef0de53a563122212e01a012182e5829683402b54c9427177e79fd8af53/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343836323732332f3930363137312f39383333316133612d666337372d313165322d396662332d6130623262373464373834662e706e67"><img src="https://camo.githubusercontent.com/9fd02ef0de53a563122212e01a012182e5829683402b54c9427177e79fd8af53/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343836323732332f3930363137312f39383333316133612d666337372d313165322d396662332d6130623262373464373834662e706e67" alt="tabs" data-canonical-src="https://f.cloud.github.com/assets/4862723/906171/98331a3a-fc77-11e2-9fb3-a0b2b74d784f.png" style="max-width: 100%;"></a></p>