Increase spacing size when text increases

[CGTS]

Currently I have my font size/line-height set at 16/24 and my method set to 'ratio'. With this set-up I can use '@include margin-bottom(1);' and it will output the margin-bottom to 24px/1.5rem (as expected). However, when I hit a higher breakpoint and increase my font size to 18 at 1.5 (18/27) the margin-bottom remains at 24px/1.5rem instead of matching the new line-height.

The Rem is correct but the pixel fallback is still 24px. Am I doing something wrong? or is this the expected outcome?

[jptaranto]

Hey @CGTS that's the expected outcome. It's actually impossible to change that pixel fallback without using a separate media query inside the element. Which kind of defeats the whole purpose changing the html font-size in the first place.

Pixel fallbacks are always going to be limited to this due to their inherent non-relative nature. They are really only supplied for older browsers (IE8 in particular). So when using rems take full advantage of their relative nature and use media queries to scale things as much as you like, just understand that the pixel fallbacks will always be locked to the originally declared $base-line-height.

If that approach doesn't work for you, you can always use em as your $base-unit instead. That's going to create a whole world of potential issues, especially if you are adopting it mid way on a project.

Sorry it's taken so long to get back to you. My github notifications aren't on for some reason...

[CGTS]

Thanks for the reply. I ended up just turning pixel fallbacks off, as IE8 wasn't a requirement.