Responsive Full Width Tabs

View demo Download source A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts. The food shapes in the content images are from PsdBlast. The icons used in the tabs are by DesignModo and the icon font was created using the Icomoon App. The HTML <div id="tabs" class="tabs"> <nav> <ul> <li><a href="#section-1" class="icon-shop"><span>Shop</span></a></li> <li><a href="#section-2" class="icon-cup"><span>Drinks</span></a></li> <li><a href="#section-3" class="icon-food"><span>Food</span></a></li> <li><a href="#section-4" class="icon-lab"><span>Lab</span></a></li> <li><a href="#section-5" class="icon-truck"><span>Order</span></a></li> </ul> </nav> <div class="content"> <section id="section-1"> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Sushi Gumbo Beetroot</h3> <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p> </div> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Pea Sprouts Fava Soup</h3> <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p> </div> <div class="mediabox"> <img src="img/03.png" alt="img03" /> <h3>Turnip Broccoli Sashimi</h3> <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p> </div> </section> <section id="section-2"> <div class="mediabox"> <img src="img/04.png" alt="img04" /> <h3>Asparagus Cucumber Cake</h3> <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p> </div> <div class="mediabox"> <img src="img/05.png" alt="img05" /> <h3>Magis Kohlrabi Gourd</h3> <p>Salsify taro catsear garlic gram celery bitterleaf wattle...