Menu icon Foundation
F5 Sass Default Media Queries Issue

I'm running the Sass version of Foundation 5 and am running into an issue with the default media queries.

Here's my app.scss:

@import "settings";
@import "foundation";

@media #{$small-up} { 
  body {background: red;} 
} 
@media #{$medium-up} { 
  body {background: orange;} 
} 
@media #{$large-up} { 
  body {background: yellow;} 
} 
@media #{$xlarge-up} { 
  body {background: green;} 
} 
@media #{$xxlarge-up} { 
  body {background: blue;} 
}

I've also uncommented lines 70-94 from _settings.scss:

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

$screen: "only screen";

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

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

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

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

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

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

Unfortunately only the $small-up media query is being applied - at various widths the background color is always red and does not change. I've also tried reversing the order of styles and switching from $small-up to $small-only (and $medium-only, etc.) and switching their order but that red persists.

Do you know how I can fix these media queries to work properly?

media query

I'm running the Sass version of Foundation 5 and am running into an issue with the default media queries.

Here's my app.scss:

@import "settings";
@import "foundation";

@media #{$small-up} { 
  body {background: red;} 
} 
@media #{$medium-up} { 
  body {background: orange;} 
} 
@media #{$large-up} { 
  body {background: yellow;} 
} 
@media #{$xlarge-up} { 
  body {background: green;} 
} 
@media #{$xxlarge-up} { 
  body {background: blue;} 
}

I've also uncommented lines 70-94 from _settings.scss:

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

$screen: "only screen";

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

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

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

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

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

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

Unfortunately only the $small-up media query is being applied - at various widths the background color is always red and does not change. I've also tried reversing the order of styles and switching from $small-up to $small-only (and $medium-only, etc.) and switching their order but that red persists.

Do you know how I can fix these media queries to work properly?

Karl Ward over 5 years ago

I tried your code, and it works fine here. Are you sure you are not setting body background somewhere else? ... or maybe you have a wrapper covering the body that is set to red?

Ryan Burnett over 5 years ago

Hi Karl,

Uncommenting line 6 of _settings.scss:

@import "foundation/functions";

...fixed the problem for me.

John Griffiths about 5 years ago

had the same issue with custom breakpoints not being applied, adding:

@import "foundation/functions";

resolved the issue, obviously needed to use upper/lower bound methods.

Mario almost 5 years ago

hi
friend try this

/Small screens */
@media only screen { } /
Define mobile styles */

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) {

}


/* Medium screens /
/
min-width 641px and max-width 767px medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 47.9375em) {

}

/* min-width 768px and max-width 980px, use when QAing tablet-only issues */
@media only screen and (min-width: 48em) and (max-width: 61.25em) {

}

/* min-width 981px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 61.26em) and (max-width: 64em) {

}


/* Large screens /
/
min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) { }

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { }


/* XLarge screens /
/
min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) { }

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { }


/* XXLarge screens /
/
min-width 1921px, xlarge screens */
@media only screen and (min-width: 120.063em) { }

Mario almost 5 years ago

y de donde jalo este achivo o tengo que crearlo
@import "foundation/functions";