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

Order summary card solution HTMS & CSS, Flexbox

Jana 110

@janamanzana

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, would really appreciate some comments and suggestions! :)

Question: Is it better to specify font sizes, margins, paddings, etc in px separately for each media query or specify them only once in relative units?

I think by specifying in absolute units I can make sure that the design keeps the exact look that I want but maybe it's not very responsible or accessible...

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello there, Jana! 👋

Wonderful job on this challenge! 🙌 The design of your solution looks great and so does your markup! 👏

There might be varying answers to your question, but I think I prefer to specify values like margin or padding or font-size separately for each screen size range that I'm building a site for (just because that gives me a little more control over how the site looks at each responsive design stage).

However, specifying values such as that once, and allowing them to be adjusted by changing the values of em or rem (like with media queries) is also a viable approach.

Also, I believe you should always specify values such as those in a responsive unit such as em or rem (not px), to ensure that changing the root font-size of the document will cause the rest of the site to scale up/down (which is important for accessibility reasons).

Hope that helps a bit. 🙂

Keep coding (and happy coding, too)! 😁

Marked as helpful

0

Jana 110

@janamanzana

Posted

@ApplePieGiraffe Thanks, very informative! :))

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