I'm having a problem with my fonts scaling properly and I can't figure out what's going on.
This is a SS 7.1 site.
I have my base font size set to 14px (that was the default).
I set my H1 size to 3.6rem in the Site Styles (equivalent is 50.4px when I view in the inspector)
I set my p2 size to 1.35rem (equivalent is 18.9px when I view in the inspector).
These sizes display correctly when my browser window is set above 1620px wide, but when I size the window smaller than that, the font sizes get much BIGGER, which seems counter-intuitive, and not at all how I want them to appear. I want them to be the same.
I can see these parameters in the CSS, but I don't know how the formula works. Can anyone help me? I want the fonts to be the same scale for all laptop and desktop resolutions.
@media screen and (min-width: 0px) and (max-width: calc(1619px)) and (orientation: landscape)
h1 {
font-size: calc((3.6 - 1) * 1.2vw + 1rem);
}
@media screen and (min-width: 1620px)
h1 {
font-size: calc(3.6 * 1rem);
}
The second value (for the 1620px width) is the one I want for all.
I wish I didn't have to do this as custom CSS, I feel like this should work better as the default. Is there something I've missed in the Site Styles tools?
Thank you!