Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section Solution

@ariel-gallardo

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The instructions indicate that they are 15px for the letters, but from there with the rest of the page, as well as for the titles and so on, should the size of the letters be changed with em?

Community feedback

Alex 1,090

@AlexBueckig

Posted

You are right, but I'd recommend using rem over em for the font-size. When using em for font-size the value always refers to the elements parent font-size and calculates its size according to it. Using rem (abbreviation for root-em) always looks at the root element (html-tag) and calculates its size from there. (Remember: Using em for margin and padding always refer to the actual elements font-size, not the parents.)

This makes it easier if you want to change the font-size in media queries because you mostly just need to change the html's font-size and all the other font-sizes scale accordingly. The parts where you actually need to manually adjust the font-sizes will be a lot less using this approach.

2
P
Matt Studdert 13,611

@mattstuddert

Posted

Nice work on this challenge! As @AlexBueckig mentioned, I'd also recommend rem over em, it's much easier to control. Even though the style-guide.md mentions 15px for the regular text, I'd still size it in rem. The 15px is just there as a reference.

I hope you enjoyed the challenge!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord