Menu icon Foundation
Changing media query bounds

just a little gotcha, if you're changing the range values for media queries, as per

http://foundation.zurb.com/docs/media-queries.html

As well as changing the values in e.g.
$medium-range

you'll need to restate all the query variables that are related, e.g.

$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;

they won't necessarily need changing, but due to one's _settings generally being required before including Foundations _global, it doesn't inherit otherwise.

Unless someone knows of a neater way?

media querysettingsbreak-points

just a little gotcha, if you're changing the range values for media queries, as per

http://foundation.zurb.com/docs/media-queries.html

As well as changing the values in e.g.
$medium-range

you'll need to restate all the query variables that are related, e.g.

$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;

they won't necessarily need changing, but due to one's _settings generally being required before including Foundations _global, it doesn't inherit otherwise.

Unless someone knows of a neater way?

Toby Stokes about 6 years ago

Also, how do you get a line to break in this forum?

Ring Fai Cheung almost 6 years ago

Nice find! Maybe it's better to add the !default to the _global file.
The variables in the _settings file should then by able to overrule the defaults.

_global.scss:

$small-range: (0em, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em) !default;

David Ackerman almost 6 years ago

This still breaks everything for me. Now now media queries are being applied, just the smallest breakpoint for everything.

dave vanderkloot almost 6 years ago

same problem as David Ackerman.

dave vanderkloot almost 6 years ago

solved by uncommenting this line:
@import "foundation/functions";

Brian Hughes over 5 years ago

Old post, I know, but I've been trying to adjust the medium breakpoint to a smaller range but I can't get the changes to take affect. Tried making the changes in _settings.scss and in _global.scss but nothing. The @import "foundation/functions"; line was already uncommented.

What up with that?

Harmony Steel over 4 years ago

I'm having the exact same problem as Brian above, and I've tried all of the solutions listed in this thread.

Technically, if you just use Foundation out of the box, the "large-range" starts at 1024 pixels wide - and this does work on a resized browser screen. But on an actual device, like an iPad in landscape mode, the layout acts like it's in the "medium-range".

Does anyone know of a workaround?

Thank you :)

Harmony Steel over 4 years ago

Ok I think I found a solution, at least for the way our dev environment is set up, and that was simply running "compass watch" on the "foundation" folder before making my changes.

Here's what worked for me in getting the $medium-breakpoint in _settings.scss to cut out just before iPad landscape (1024 px).

  1. Boot up a command prompt window (Windows start button > type "cmd" and hit enter) then navigate to your "foundation" folder in the command window. e.g. if your website lives in c:\websites\site1 you are going to want your command prompt to look something like:
    C:\websites\site1\foundation

  2. type "compass watch" (without the quotes) and hit enter.

  3. Open up your "scss/_settings.scss" file and navigate to the "d. Media Query Ranges" section which is around line 150.

  4. Uncomment the following lines and change the medium-breakpoint from 1024 to 1023 (or whatever you want for your own purposes), e.g.

    $small-breakpoint: em-calc(640);
    $medium-breakpoint: em-calc(1023);
    $large-breakpoint: em-calc(1440);
    $xlarge-breakpoint: em-calc(1920);

  5. Save the file and take a look at your command prompt, if compass is running correctly it should be printing out something like:
    "modified scss/_settings.scss
    write stylesheet/app.css"

  6. Test on an actual device like an iPad to make sure the new breakpoint is working as expected (don't rely just on browser width as it can sometimes be unreliable).

Anyway hope that can help someone else out.

Rafi Benkual over 4 years ago

@Harmony - thanks for sharing! I can confirm this is the way to do it and it worked on a new project.

Harmony Steel over 4 years ago

Hey Rafi, thanks for the feedback, glad it was useful :)!