Menu icon Foundation
Mixing visibility classes in foundation 6

Hi i'm having a bit of a problem with the new visibility classes. I've got the following code: 

 

<div class="row show-for-small show-for-medium hide-for-large">
    <div class="small-3 columns">
        <button type="button" class="button" data-toggle="off-canvas">Open Menu</button>
    </div>
</div>

I'd used to do this with a simple "show-for-medium-down" which worked great. The above doesn't work. It'll hide it on large, which is great then show on medium but dissapears on small.

I don't have to repeat the code block surely? One for small and one for medium?

Thanks for any help

visibility classessites

Hi i'm having a bit of a problem with the new visibility classes. I've got the following code: 

 

<div class="row show-for-small show-for-medium hide-for-large">
    <div class="small-3 columns">
        <button type="button" class="button" data-toggle="off-canvas">Open Menu</button>
    </div>
</div>

I'd used to do this with a simple "show-for-medium-down" which worked great. The above doesn't work. It'll hide it on large, which is great then show on medium but dissapears on small.

I don't have to repeat the code block surely? One for small and one for medium?

Thanks for any help

Chris Shelswell over 3 years ago

Ah great that helps thanks. I think i was just getting a bit muddled coming from F5 :) - thanks

Rafi Benkual over 3 years ago

You can use just .hide-for-large alone. It is assumed the element will show unless the class specifies it will not.

Like this http://codepen.io/rafibomb/pen/eZeZob?editors=1000