I was not happy with the fonts as it just was not quite the look I wanted. I tried a few fonts and it was just not doing it.
so I set the font color to transparent and gave the title a background image of the cutout letters I made in photoshop. that way it is still visible to screen readers but I get the look I wanted.
Hey thanks for the help! I wasn’t too worried about the watermark, since you know, that’s what stock images are for but, it does look much better without it. I also prefer the smaller image size. I was going to resize it but, I left it for now.
I added the font-size code but, can that expression be simplified? I kinda understand what it’s doing, it’s based on an original font-size of 12px. It’s the rest that I’m having a little trouble deciphering. Is it based on container size?
Thanks for the help. If you don’t have the time to explain, no worries. I’m sure I’ll get there.
EDIT Also, after adding that font-size, I was forced to change the padding to a relative unit on my ordered list, which is probably better anyway.
The calculations create a fluid font size based on screen width
At 12px for a 300px wide screen growing up to 28px for a 1600px wide screen. The 100vw stands for 100% of the viewport width. As the viewport is is scaled so will your font size. You can adjust what the base numbers are by changing the equation. For example replace 12 with 14 ( change both instances of 12) that would set the minimum font size to 14px.
Then yes use rem for all your measurements for example .5rem would be 7 to 14 px depending on screen size
It comes from an article at https://css-tricks.com