Zurb Foundation - Remove column for medium screens

Question

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 ?

Answer 1

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.

Answer 2

The best solution that I've come up with is to use jQuery to make some changes to specific columns when the browser is resized (or loaded at a certain size).

Something like below (taken directly out of my project file - so you'll have to edit for your specific purposes).

$(document).ready(function() {
    check_column_size();  
});

$(window).resize(function() {
    check_column_size();
});

function check_column_size() {
    if( $(window).width() >= 768 && $(window).width() <= 800 ) {
        $('section#main').removeClass( 'eight' ).addClass( 'eleven' );
        $('section#sidebar').removeClass( 'hide-for-small' ).addClass( 'hide' );
    } else {
        $('section#main').removeClass( 'eleven' ).addClass( 'eight' );
        $('section#sidebar').removeClass( 'hide' ).addClass( 'hide-for-small' );
    }
}

The line that adds / removes the hide-for-small class is needed because that class includes the style

display:inherit !important;

which overrides any attempt to hide/remove the element. So I needed to remove that class, and then add it back on afterwards in-order to successfully hide my element at resolutions more than "small".

Seems to work for my case, but I'm only doing it on one small section. You might run into problems if you're trying to make it happen for many different elements on the page all at once.

Answer 3

You can get this working with duplicate content:

<div class="row hide-for-medium-down">
    <div class="three columns">...</div>
    <div class="three columns">...</div>
    <div class="three columns">...</div>
    <div class="three columns">...</div>
</div>
<div class="row show-for-medium-down">
    <div class="four columns">...</div>
    <div class="four columns">...</div>
    <div class="four columns">...</div>
</div>