Tic tac toe project help

I have a tictactoe only works with full screen page, in my server it works well but not in CodePen

I m using flex, but my font don’t adapt to the box model?
When the height of the windows is small, the font doesn’t change, it works only on width?
Can you move my post in CSS ?

.circle, .cross, .win
    font-size: 16.5vw;



the vw property will scale the font to the size of the View-port Width

vh will do view-port height but i really wouldn’t use it on font’s.

I find using the vw for font’s is a real pain and takes too many media queries to get it looking right. because as you will see, a font taking up 5vw or whatever, can look awful with just a small adjustment to the width of the view-port. For me, at 1920px wide - the font overflows the box and demonstrates this issue, but at a smaller width the font becomes too small.

Maybe its me just not doing it right but i find it easier just to use non reactive font sizes like px or the preferred rem unit.

I just change the font size by using rem when the design dictates. this way I find there isn’t too much messing about and i can change the size as needed with existing media queries that I might have…

If you want to delve into responsive typography a google search brings up plenty of articles - too many to link to!

1 Like

I aggree with you.
for know i’ll keep it with @media it works.