CODEWITHSUNDEEP
responsive-designzurb-foundation
schettino72
schettino72

Reputation: 3170

how to set a "breakpoint" to stack a row using zurb foundation grid

Lets say I have a row with two elements on 12 column grid:

<div class="row">
    <div class="three columns">part 1</div>
    <div class="nine columns">part 2</div>
</div>

Normally they are displayed side by side. like:

part1      part2

But in case the screen is smaller than XXX it would be displayed as if there were 2 rows...

part1
part2

Can zurb foundation do that? or any other framework?

Edit: I would like to specify the value of the breakpoint (XXX) myself. Not only relying on the default behaviour.

Upvotes: 2

Views: 2535

Answers (1)

Ed Charbeneau
Ed Charbeneau

Reputation: 4634

If you would like to change the breakpoint, then you need to modify the breakpoints outlined here: http://foundation.zurb.com/docs/media-queries.php

/* Medium screens */
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }

/* Small screens */
@media only screen and (max-width: 767px) { ... }

Upvotes: 1

Related Questions