Menu icon Foundation
Foundation email header sizes

Hi I'm probably being thick, I just can't get my head around this in the docs

Header Sizes

The framework includes two typographic scales—one uses a narrow range of sizes for small- and medium-sized screens, and the other uses a wider range of sizes for large-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the $hx-font-size variables in your project's Settings File.

 

I want to set a h1 size for small screen and a different size for large screens

headeremailtextSize

Hi I'm probably being thick, I just can't get my head around this in the docs

Header Sizes

The framework includes two typographic scales—one uses a narrow range of sizes for small- and medium-sized screens, and the other uses a wider range of sizes for large-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the $hx-font-size variables in your project's Settings File.

 

I want to set a h1 size for small screen and a different size for large screens

Rafi Benkual over 3 years ago

You marked this post as a Foundation for Emails question but I think the quote is from sites.

In Foundation for Emails, the variables are in the settings file under typography

To change these based on breakpoint, you can use a media query.

Kevin Neal over 3 years ago

Hi Rafi, I took that quote from the Foundation for Email typography section, the way its written it seems to suggest that you can control two sets of sizes from the settings file.

 

No worries though I'll use a media query to do it instead