Menu icon Foundation

My Posts


My Comments

Stefan4UK commented on Stefan4UK's post about 4 years

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 :).

Stefan4UK commented on Stefan4UK's post about 4 years

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?

Stefan4UK commented on Stefan4UK's post about 4 years

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 commented on Stefan4UK's post about 4 years

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

Stefan4UK commented on Stefan4UK's post about 4 years

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.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Stefan4UK's post about 4 years

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 :).

You commented on Stefan4UK's post about 4 years

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?

You commented on Stefan4UK's post about 4 years

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?

You commented on Stefan4UK's post about 4 years

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

You commented on Stefan4UK's post about 4 years

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.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content