Menu icon Foundation
Change Grid Columns on Hide

Hiya,

 

I have run into a problem which I hope someone can help with.  Doing a responsive site I have a filter on the left for desktops and tablets, but I want the filter to be removed on phones.  So for this I use hide-for-small-only.

But on the table structure, the grid is laid out like

<large-3 medium-3 small-5 columns hide-for-small-only>

<large-9 medium-9 small-7 columns small-up-2 medium-up-3 large-up-4>

When the large-3 hides, I need the large-9 to become large-12 only. I.e:

<large-12 columns small-up-2>

Any ideas ?

Thanks

 

gridcolumnscss

Hiya,

 

I have run into a problem which I hope someone can help with.  Doing a responsive site I have a filter on the left for desktops and tablets, but I want the filter to be removed on phones.  So for this I use hide-for-small-only.

But on the table structure, the grid is laid out like

<large-3 medium-3 small-5 columns hide-for-small-only>

<large-9 medium-9 small-7 columns small-up-2 medium-up-3 large-up-4>

When the large-3 hides, I need the large-9 to become large-12 only. I.e:

<large-12 columns small-up-2>

Any ideas ?

Thanks

 

Rafi Benkual over 3 years ago

Just wondering if you purposefully left out the div's?

Since you are looking for the main content to be 12 columns on small, you can set it to be small="12". Here is an example: http://codepen.io/rafibomb/pen/xVjvMG