So, I am working on building my first lightning component! I've had a blast so far, but I am not sure if I'm going about this the right way or not. I am using the scoped example that is on the lightning design system under the tabs section (http://www.lightningdesignsystem.com/components/tabs).
I made quite a lot of modifications to this in my own component. I realized it didn't look very great on the mobile so I took a step back. I copied the code again into a new component and then added (by copy/paste) 6 more tabs in tab header. It seems to be formatting as ugly as my customizations are... Is there something specific you need in your lightning components to make it format correctly across all devices?
For what it matters, I am using the Napoli community template.
----EDIT----
<aura:component implements="forceCommunity:availableForAllPageTypes">
<ltng:require styles="/resource/slds080/assets/styles/salesforce-lightning-design-system.css"/>
<div class="slds-tabs--scoped"> <ul class="slds-tabs--scoped__nav" role="tablist">
<li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="Item One" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1">Item One</a></li>
<li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Two" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2">Item Two</a></li>
<li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Three" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3">Item Three</a></li>
<li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="Item One" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1">Item One</a></li>
<li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Two" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2">Item Two</a></li>
<li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Three" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3">Item Three</a></li>
<li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="Item One" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1">Item One</a></li>
<li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Two" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2">Item Two</a></li>
<li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Three" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3">Item Three</a></li> </ul> <div id="tab-scoped-1" class="slds-tabs--scoped__content slds-show" role="tabpanel">
<h2>Item One Content</h2> </div> <div id="tab-scoped-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
<h2>Item Two Content</h2> </div> <div id="tab-scoped-3" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
<h2>Item Three Content</h2> </div> </div>
</aura:component>
EDIT: Turns out this scoped is meant just for the desktop and not everything on the Lightning Design System is actually responsive. You can tell what is based on the icon... if its just Large then it only works on desktops
<ltng:require styles="/resource/SLDS090/assets/styles/salesforce-lightning-design-system.min.css"/>