Menu icon Foundation
How to correctly change header sizes?

I'm changed header sizes in _settings.scss to that (see code), standard sizes too big for me. On all media header sizes decreasing proportionally, except of small.

So, why that happening and how to fix it? Foundation version is 5.2.2.

$h1-font-size: rem-calc(32);
$h2-font-size: rem-calc(27);
$h3-font-size: rem-calc(24);
$h4-font-size: rem-calc(21);
$h5-font-size: rem-calc(18);
$h6-font-size: 1rem;

2014 05 14 00 52 02

headertypography

I'm changed header sizes in _settings.scss to that (see code), standard sizes too big for me. On all media header sizes decreasing proportionally, except of small.

So, why that happening and how to fix it? Foundation version is 5.2.2.

$h1-font-size: rem-calc(32);
$h2-font-size: rem-calc(27);
$h3-font-size: rem-calc(24);
$h4-font-size: rem-calc(21);
$h5-font-size: rem-calc(18);
$h6-font-size: 1rem;

2014 05 14 00 52 02
Steve Trask about 5 years ago

Hi Sergey,

That certainly is a bit odd!

I just had to try, so i downloaded the latest version and got the following results

http://i60.tinypic.com/2cn9x11.png

Have you changed any of the core files of Foundation? looks like a fresh update might fix the issue

Hope this helps

Steve

Sergey Estrin about 5 years ago

Thank you, Steve, for your answer, I upgraded foundation: http://g-rain-design.ru/upload/resize_cache/blog/e82/800_800_1/foundation-update.png

But version is still 5.2.2 and I still have the issue.

This bug appears only when I changed standard sizes of headers.

I do not modify any files of foundation except of code above in _settings.scss file.

Raul Carrillo Garrido over 3 years ago

Hi!

It also happened to me. I've been solving it by moving headers font size re-definition to custom.scss instead. That worked for me!

i think may be some kind of override order issue.

Best wishes.

Aron Patterson over 3 years ago

I agree with Raul, it sounds like an override issue - another stylesheet is trying to change the font size on the small breakpoint.

I recommend you open it up in Chrome, minimize your screen, right click the header, and Inspect Element to see what CSS element is currently being treated with priority. That can at least narrow down the problem.