Menu icon Foundation
Uncommenting media query variables breaks all the media queries

I'm using foundation-rails 5.0.2.0. In app/assets/stylesheets/foundation_and_overrides.scss, it has these lines:

// Media Query Ranges
// $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)})";

When I uncomment these lines, the grid and all other media-query-related styles on my site break. And by "break", I mean "use the small/mobile styles". Instead of:

@media only screen and (min-width: 64.063em) {
  .large-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

I end up with this in my compiled stylesheet:

@media only screen and (min-width: lower-bound(64.063em, 90em)) {
  .large-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

How am I supposed to get the `lower-bound` stuff to compile correctly? Why are these comments in there if they don't work? I am using Sass v3.2.12

media queriesrailsCustomizationbug

I'm using foundation-rails 5.0.2.0. In app/assets/stylesheets/foundation_and_overrides.scss, it has these lines:

// Media Query Ranges
// $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)})";

When I uncomment these lines, the grid and all other media-query-related styles on my site break. And by "break", I mean "use the small/mobile styles". Instead of:

@media only screen and (min-width: 64.063em) {
  .large-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

I end up with this in my compiled stylesheet:

@media only screen and (min-width: lower-bound(64.063em, 90em)) {
  .large-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

How am I supposed to get the `lower-bound` stuff to compile correctly? Why are these comments in there if they don't work? I am using Sass v3.2.12

David Ackerman almost 4 years ago

Yep, these totally do not work. Kind of a deal breaker, honestly.

Ben Brooks almost 4 years ago

I ran into this problem as well, but found a solution.

'lower-bound' is a function defined in "foundation/_functions.scss", so for it to work you have to uncomment line 6 in _settings.sccs

@import "foundation/functions";

before that function can work.

Hope that helps!

dave vanderkloot almost 4 years ago

having the same problem; using the gem, and 5.0.2. can't customize the breakpoints/media queries. everything uses the small by default.

dave vanderkloot almost 4 years ago

yay - Ben Brook's answer is correct. this line needed to be uncommented as well:
$rem-base: 16px;

Chad R. almost 3 years ago

Man, this is frustrating. I've spent way too long trying to solve this issue. My settings file is exactly as Ben and Dave have suggested. My breakpoints work, BUT only if I use the "-only" variables. None of the other variables work, including the legacy variables.

All other variables default to the last declared property regardless of the media queries.

Anyone have any ideas?