Menu icon Foundation
Change size of H1, H2 etc depending on screen size

I know I can use classes like show-for-large-up to control variations of sections on different sized screens, but is there an easy way to change the size of a heading depending on the screen size?

I have just noticed in a couple of places that the heading is a little large so goes to a second line on smaller screens, so it would be useful to have one font size for large screens, and a smaller font size for smaller screens.

Thanks.

font size

I know I can use classes like show-for-large-up to control variations of sections on different sized screens, but is there an easy way to change the size of a heading depending on the screen size?

I have just noticed in a couple of places that the heading is a little large so goes to a second line on smaller screens, so it would be useful to have one font size for large screens, and a smaller font size for smaller screens.

Thanks.

Kohki over 3 years ago

if you use sass version Foundaiton6, write like below

 

@include breakpoint(small) {
  h1 {
    font-size: rem-calc(14);
    // when screen is small, set font-size same as 14px
  }
}

h1 {
  font-size: rem-calc(22);
  // when screen is medium or wider, set font-size same as 14px
}

Iain MacDonald over 3 years ago

Thanks Kohki - that's perfect!