CODEWITHSUNDEEP
csszurb-foundation
designerNProgrammer
designerNProgrammer

Reputation: 2701

Custom columns for tiny (400*800) resolution

I am really impressed by foundation's grid system. I am working on a layout in which i need like 12 columns for the screen resolution of 400px wide.Like a small phone. Now foundation does not give me tiny columns small is the best i get. So how can i set specific column sizes for a particular resolution like say tiny? thanks

Upvotes: 0

Views: 40

Answers (1)

JAre
JAre

Reputation: 4756

The grid scales down gracefully to the point when even smaller columns become unreasonable.

http://jsfiddle.net/LV339/2/

html:

<div class="row">
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
   <div class="small-1 columns"></div>
</div>

css:

.row{
    max-width:400px;
}
.columns{
    height:500px;
}
.columns:nth-child(odd){
    background:red;
}
.columns:nth-child(even){
    background:blue;
}

Upvotes: 1

Related Questions