Zurb Foundation - Remove column for medium screens

css, html, responsive-design, zurb-foundation

Solution

Not sure which version you are using, but in Foundation 5, try this...

<div class="row">
    <div class="columns small-3">...</div>
    <div class="columns small-6 large-3">...</div>
    <div class="columns small-3 hide-for-medium-down">...</div>
    <div class="columns small-3">...</div>
</div>

or this...

<div class="row">
    <div class="columns small-3 large-4">...</div>
    <div class="columns small-6 large-4">...</div>
    <div class="columns small-3 hide-for-medium-down">...</div>
    <div class="columns small-3 large-4">...</div>
</div>

etc., depending on how you want the remaining columns to fill in the space.

Problem

I have a site prototype in Zurb Foundation 3, so far I have the desktop version and now I am adjusting it to be responsible on tablets and mobiles. What I am strugling with is this: I have some columns with content in a row, and I want to remove some of the columns for medium and small resolutions. But I want the other columns to stretch to the rest of the page width. How do I do this correctly ? I am using ``` class="hide-for-medium-down" ``` to hide the element, but how do I wrap the content so it stretches when some of the elements is hidden ? I found two ways but none of them works: 1) I make it as standard row-columns, eg: ``` <div class="row"> <div class="three columns">...</div> <div class="three columns">...</div> <div class="three columns hide-for-medium-down">...</div> <div class="three columns">...</div> </div> ``` but in this case the third column will just stay as empty space. 2) I can make it using block-grid like this: ``` <ul class="block-grid four-up"> <li>1</li> <li>2</li> <li class="hide-for-medium-down">3</li> <li>4</li> </ul> ``` but this time the 4th column just moves left to the position of 3th and the fourth space will stay empty again. Closest I got was using the mobile-x-up class to adjust the grid to have lesser columns for mobiles - this way: ``` <ul class="block-grid four-up mobile-three-up"> <li>1</li> <li>2</li> <li class="hide-for-medium-down">3</li> <li>4</li> </ul> ``` Unfortunatelly, this only works for mobiles, but I am unable to use this also for tablets on medium resolution as there is no equivalent for this. So overall my question is: what is the best way to solve this ? And what is the best way to hide elements on smaller screens while still keeping the grid ? Is it even possible to remove elements from grid on medium screens while still keeping the grid working ?

Original source