CODEWITHSUNDEEP
htmlcsszurb-foundationmultiple-columnsgrid-layout
visyoual
visyoual

Reputation: 341

zurb foundation make column width persist across screen sizes without individual declarations

Using zurb foundation, I'm looking to have a single class declaration that will persist across media query breakpoints. For instance, if I wanted to create a div that was 10 columns no matter if it were being viewed on a desktop or a phone.

I realize this can be accomplished by adding all classes like this: 

<div class"xxlarge-12 xlarge-12 large-12...">
   The content  
</div>

but
I would really rather not add 5+ classes to every div that I want spanning the entire screen regardless of size.

Thanks in advance

Upvotes: 1

Views: 54

Answers (2)

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

Foundation uses min-width media queries, which means as long as you're using the "small" class, and the it doesn't change as the screen gets larger that's all you need.

For example if you want it to be full screen on Mobile and half screen on desktop you would use the following markup:

<div class="small-12 large-6 columns"></div>

Here's a link to the Zurb Foundation documentation on their grid.

Upvotes: 3

Albzi
Albzi

Reputation: 15619

If you use small-4 it should scale all larger screen sizes to only take up 4 of the grid.

In your instance you want to use small-12 columns.

Upvotes: 2

Related Questions