Solution for headers scaling smaller at larger screen sizes?

JasonH · February 9

Hello,

I'm wondering if anyone has a solution for headers scaling smaller when the screen width goes larger / above 1920px? (Which is what my max width is currently set to). The body copy is doing a bit of the same thing, but I have been able to adjust that a bit so it's not as drastic. But the headers are getting too small.

Please let me know if there is a fix, something I'm missing, a CSS fix, etc.
https://www.jason-hufford.com/product-design/alkisupplements

Thanks!

nick_sh · February 9

Did you try setting "Fill" in image options?

JasonH · February 9

Sorry, I mean font headers, not images.

nick_sh · February 9

Got it, if you feel headings are small, you can set font sizes manually (add to Custom CSS):

@media screen and (min-width: 1920px) 
  .html-block h1 {
      font-size: ~"calc(var(--heading-1-size-value) * 1rem)" !important; 
  }
}

You can play with 1 rem there. E.g.:

@media screen and (min-width: 1920px) 
  .html-block h1 {
      font-size: ~"calc(var(--heading-1-size-value) * 1.4rem)" !important; 
  }
}

Or just

@media screen and (min-width: 1920px) 
  .html-block h1 {
      font-size: 90px !important; 
  }
}

JasonH · February 9

Thanks Nick, that worked with some rem fiddling.

Solution for headers scaling smaller at larger screen sizes?

Recommended Posts

JasonH

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

nick_sh

Link to comment

JasonH

Link to comment

nick_sh

Link to comment

JasonH

Link to comment

Create an account or sign in to comment

News

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources