nb: has been asked not answered here: how make use of breakpoints in zurb foundation 4?
the small , large columns on foundation 4 handy, small activates perhaps little earlier i'd - there way of setting medium-columns setting smallish not tiny resolutions, e.g. 800 * 600?
in specific case, i'd following setup:
<div class="small-12 medium-6 large-4 columns">first column</div> <div class="small-12 medium-6 large-8 columns">second column</div>
in zurb foundation 4 have added medium grid columns following. add after @import of foundation globals , grid.
@if $include-html-grid-classes != false { /* styles screens atleast 768px , max width 1024px */ @media #{$small} , (max-width: 1024px) { @for $i 1 through $total-columns { .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); } } @for $i 0 through $total-columns - 1 { .row .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); } } @for $i 1 through $total-columns - 1 { .push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); } .pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); } } .column.medium-centered, .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); } .column.medium-uncentered, .columns.medium-uncentered { margin-#{$default-float}: 0; margin-#{$opposite-direction}: 0; float: $default-float !important; } .column.medium-uncentered.opposite, .columns.medium-uncentered.opposite { float: $opposite-direction !important; } } } now can use medium small , large grid.
Comments
Post a Comment