Menu icon Foundation
Update (v. 5.5.0 to 5.5.2) calculates wrong breakpoints

Hello everyone,

I updated my foundation installation which unfortunately completely changed my media-query breakpoints.

$base-font-size: 14px;
$rem-base:$base-font-size;

In version 5.5.0 the result of these input variables was f.e. a "large-up"-breakpoint with min-width:64.063em

Unfortunately in the newest version 5.5.2 the same input variables result in a "large-up"-breakpoint of min-width:73.2142857143em.

When I set $rem-base to 16 px the breakpoints get calculated "correctly" like in the previous version BUT then all font-size values I calculate with the rem-calc function are wrong.

Is this a bug or what can I do to get the same output values as in the previous version?

Many thanks in advance
Stefan

Foundation 5breakpointsrem-calcem-calc

Hello everyone,

I updated my foundation installation which unfortunately completely changed my media-query breakpoints.

$base-font-size: 14px;
$rem-base:$base-font-size;

In version 5.5.0 the result of these input variables was f.e. a "large-up"-breakpoint with min-width:64.063em

Unfortunately in the newest version 5.5.2 the same input variables result in a "large-up"-breakpoint of min-width:73.2142857143em.

When I set $rem-base to 16 px the breakpoints get calculated "correctly" like in the previous version BUT then all font-size values I calculate with the rem-calc function are wrong.

Is this a bug or what can I do to get the same output values as in the previous version?

Many thanks in advance
Stefan

Stefan4UK over 4 years ago

Please, is there anybody having an idea how to solve this problem?
What can I do to set a body-font-size of 14 px?
If I do that t the breakpoints defined in the settings file get translated into browser breakpoints that are much higher than the original breakpoint values in the settings file.

I really appreciate any help on what's going on there or how this can be solved.

Geoff Kimball over 4 years ago

Hey Stefan,

We brought in a pull request in 5.5.2 that cleaned up how breakpoints are created, so the issue might be in there. We're looking into it! Here's the pull request.

Stefan4UK over 4 years ago

Hey Geoff,

thanks a lot for your effort. Your idea sounds very promising and I'm really glad you help me finding out what results in this different breakpoint behaviour.

In the meantime I'll try to debug how exactly the em-calc and rem-calc function work in order to understand a little bit better the underlying principles.

So again many thanks for your efforts

Alex over 4 years ago

Hi,

the same problem here.
The breakpoints are calculated on the base of the base-font-size, but by using em in media queries we don't need this value. here we only need the standard browser font size. it doesn't matter if we set the base font size. thats why the calculation is wrong. is there any fix?

Stefan4UK over 4 years ago

Hi,

I just discovered that karland committed a fix on github:

https://github.com/karland/foundation/commit/61d2d578a76dc39c17bb2027df8a8ac6ffa212ec

Unfortunately after changing this function to what he commited, the breakpoint values stay wrong.

For version 5.5.0 the result of these input variables was f.e. a "large-up"-breakpoint with min-width:64.063em

In the newest version 5.5.2 the same input variables result in a "large-up"-breakpoint of min-width:73.2142857143em.

@Alex: Have you applied karland's commit? And if yes, did it solve the issue for you?

Stefan4UK over 4 years ago

I think I found a little mistake in karland's commit.
We should change line 139 from:
$remValues: rem-calc($values, $base-value: $rem-base);

TO
$remValues: rem-calc($values, $base-value);

For a test class this works:
.testrem{
height:em-calc(1440,16px);
width:em-calc(1440,$rem-base); //rem-base is 14px
}

testrem {
height: 90em;
width: 102.857em;
}

BUT unfortunately although the em-calc function changed this doesn't change the breakpoints!!!
Any ideas why this is the case?

Alex over 4 years ago

@Stefan4UK: Thank you for the link. I will try it out later. For now i use my own simple calculation for the em-values in the media queries.

mq-em-calc(value)

inside this function (value/16) * 1em gives me the right em-value, because the base is now 16. in _settings.scss i use this function. There i overwrite the calculation

Alex over 4 years ago

Hi,

i have integrated the fix including your little change $remValues: rem-calc($values, $base-value); and it worked for me. Em-values in media queries are calculated correct:

@function mq-em-calc($value) {
    @return em-calc($value,16);
}

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

$small-range:   (0, $small-breakpoint);
$medium-range:  ($small-breakpoint  + mq-em-calc(1), $medium-breakpoint);
$large-range:   ($medium-breakpoint + mq-em-calc(1), $large-breakpoint);
$xlarge-range:  ($large-breakpoint  + mq-em-calc(1), $xlarge-breakpoint);
$xxlarge-range: ($xlarge-breakpoint + mq-em-calc(1), mq-em-calc(99999999));

Stefan4UK over 4 years ago

Hi everyone ;),

karland found the reason for why it was still not working for me. I had my rem-base inlcuded after the _function.scss include in the _settings.scss file. Therefore without even knowing it my breakpoints where 560px,896px,1260px and 1680px. This is all default values multiplied with *(14/16).

So my rem-base was always 16px...

By using the values I calculated above my design looks like it should be ;).
Do you think using these different breakpoints is a problem? Or is it not important which breakpoints are set as long as the design looks great on every screen width?

Thanks a lot to everyone trying to help me debugging the problem. I'm glad it works now :).