Menu icon Foundation
Grids, Breakpoints and Frustrations

Hello All,
After making a few sites with Foundation, and mostly finding it a pleasure, one little thing has been bugging me. I would like to add my own breakpoints (mostly at the smaller screen-size side of things), essentially to target specifically mobiles and portrait tablets (so for example, I would like part of my site to have class="tiny-12 small-6 columns").

I have followed the guide at http://foundation.zurb.com/forum/posts/19137-additional-breakpoints - which seemed very clear, but it doesn't add the breakpoints. If anyone could help it would be very much appreciated, here is how I have changed the _global.scss file from around line 299:

// Media Query Ranges
$tiny-range: (0, 22em) !default;
$small-range: (22.063, 40em) !default;
$s-med-range: (40.063, 52em) !default;

$medium-range: (52.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;


$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;


$tiny-up: $screen !default;
$tiny-only: "#{$screen} and (max-width: #{upper-bound($tiny-range)})" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
$small-only: "#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($small-range)})" !default;


$s-med-up: "#{$screen} and (min-width:#{lower-bound($s-med-range)})" !default;
$s-med-only: "#{$screen} and (min-width:#{lower-bound($s-med-range)}) and (max-width:#{upper-bound($s-med-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

            

         

gridbreakpointbreakpointadditionalnewadded

Hello All,
After making a few sites with Foundation, and mostly finding it a pleasure, one little thing has been bugging me. I would like to add my own breakpoints (mostly at the smaller screen-size side of things), essentially to target specifically mobiles and portrait tablets (so for example, I would like part of my site to have class="tiny-12 small-6 columns").

I have followed the guide at http://foundation.zurb.com/forum/posts/19137-additional-breakpoints - which seemed very clear, but it doesn't add the breakpoints. If anyone could help it would be very much appreciated, here is how I have changed the _global.scss file from around line 299:

// Media Query Ranges
$tiny-range: (0, 22em) !default;
$small-range: (22.063, 40em) !default;
$s-med-range: (40.063, 52em) !default;

$medium-range: (52.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;


$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;


$tiny-up: $screen !default;
$tiny-only: "#{$screen} and (max-width: #{upper-bound($tiny-range)})" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
$small-only: "#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($small-range)})" !default;


$s-med-up: "#{$screen} and (min-width:#{lower-bound($s-med-range)})" !default;
$s-med-only: "#{$screen} and (min-width:#{lower-bound($s-med-range)}) and (max-width:#{upper-bound($s-med-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

            

         
Shoaib Iqbal over 4 years ago

Hi, This should work, I added your code and it worked as expected. I noticed that em is missing from first parameter, it should be 40.063em.

$s-med-range: (40.063em, 52em) !default;

$s-med-up: "#{$screen} and (min-width:#{lower-bound($s-med-range)})" !default;
$s-med-only: "#{$screen} and (min-width:#{lower-bound($s-med-range)}) and (max-width:#{upper-bound($s-med-range)})" !default;


@media #{$s-med-up}{

}

@media #{$s-med-only}{

}
@media only screen and (min-width:40.063em) { }

@media only screen and (min-width:40.063em) and (max-width:52em) { }

Alex Humphries over 4 years ago

Thank you very much! Will try this v soon!

Alex Humphries over 4 years ago

Hi. This still doesn't seem to work for me, maybe I wasn't clear enough...

What I want, is for breakpoints to be added to the grid, meaning I can collapse my columns at additional points by adding classes in the HTML (for example, most of the content I would like to collapse to class="tiny-12 small-6 columns" etc. Any ideas?

Many thanks.

Rafi Benkual over 4 years ago

In SCSS, the setting file has a variable // $include-xl-html-grid-classes: false; for the larger breakpoints. You can change it to true to activate them.