CSS Grid, CSS, HTML

Hi bryan,

We use rems mostly for responsiveness, here an example of it:

• We set font-size: 16px in the * selector and then we set a font-size for an h1 element like this: h1{font-size: 2rem}, this will give us a 32px h1 element. The problem now it would be that it'll look great in a laptop but in a mobile it may look a bit big, to fix this we'll use media queries and will set something like:

@media (min-width: 768px){
   *{
       font-size: 12px;
     }
}

• Now the font-size of the h1 element it will be 24px and it will fit better in a mobile size

That would be a good reason why you should use rems to set a font-size. If you want a more extend explanation about this you can go check this article where Kathleen McMahon dives deep into this subject.

Also: Your solution looks way to small in 4k screens mainly bc of the font-size set in the * selector

Cheers!