Menu icon Foundation
Foundation 6 media query inconsistency

Trying to get my application of F6 breakpoints right. I thought to control an element across screen widths, this is correct:

.myStyles {
  /* styles Small Up here */
  @include breakpoint(medium) {
    /* styles Medium Up here */
  }
  @include breakpoint(large) {
    /* styles Large Up here */
  }
  ...etc...
}

However, this approach does not apply styles consistently at various breakpoints, so I've had to write the above as:

.myStyles {
  /* styles Small Up here */
}

@include breakpoint(medium) {
  .myStyles {
    /* styles Medium Up here */
  }
}

@include breakpoint(large) {
  .myStyles {
    /* styles Large Up here */
  }
}

...etc...

Moreover, changes dictated by application of specific breakpoints is inconsistent. For example, I have a simple two-column layout; at large and above, they should be 40% and 60% widths, respectively. Below large, they should be 100%. In other words, the change in width should occur when the large breakpoint is reached. I have not changed this pixel value (1024px) from the default in _settings.scss (and all breakpoints in use are named in $breakpoint-classes).

However, the change actually occurs at a viewport width of 1279 pixels, which doesn't correlate to ANY $breakpoints value.

In addition, an element within the template in question uses the "show-for large" visibility class. The element appears when the viewport reaches 1278 pixels -- in other words, it appears before the breakpoint is reached.

All of this seems very buggy, and I'm really hoping someone can help me straighten this out -- as it stands, I cannot rely in F6 based on these inconsistencies. 

Foundation 6 SASSmedia queries

Trying to get my application of F6 breakpoints right. I thought to control an element across screen widths, this is correct:

.myStyles {
  /* styles Small Up here */
  @include breakpoint(medium) {
    /* styles Medium Up here */
  }
  @include breakpoint(large) {
    /* styles Large Up here */
  }
  ...etc...
}

However, this approach does not apply styles consistently at various breakpoints, so I've had to write the above as:

.myStyles {
  /* styles Small Up here */
}

@include breakpoint(medium) {
  .myStyles {
    /* styles Medium Up here */
  }
}

@include breakpoint(large) {
  .myStyles {
    /* styles Large Up here */
  }
}

...etc...

Moreover, changes dictated by application of specific breakpoints is inconsistent. For example, I have a simple two-column layout; at large and above, they should be 40% and 60% widths, respectively. Below large, they should be 100%. In other words, the change in width should occur when the large breakpoint is reached. I have not changed this pixel value (1024px) from the default in _settings.scss (and all breakpoints in use are named in $breakpoint-classes).

However, the change actually occurs at a viewport width of 1279 pixels, which doesn't correlate to ANY $breakpoints value.

In addition, an element within the template in question uses the "show-for large" visibility class. The element appears when the viewport reaches 1278 pixels -- in other words, it appears before the breakpoint is reached.

All of this seems very buggy, and I'm really hoping someone can help me straighten this out -- as it stands, I cannot rely in F6 based on these inconsistencies. 

Jarryd Fillmore about 3 years ago

+1. Would love to see an answer to this too.

Wesley Picotte about 3 years ago

Possible to bump this issue?

Kristopher Larson almost 3 years ago

I'm having the same issue did anyone figure this out?

Pieter Buitenga almost 2 years ago

Has anyone figured this out yet, fairly old post and no responses. Any help would be appreciated. 

 

Feel a bit silly but if it helps anyone else. The body font in my project is set to 16px. My font size in chrome was set to 18px. Chrome is diligently doing it's job and this is causing the knock on effect,

Instead of small breakpoint changing at 640px it didn't change until 720px. When you look at 18px being 12.5% bigger then 16px it makes perfect sense (640 * 112.5 = 720)

and so forth.