Skip to content
Submitted about 3 years ago

HTML and CSS solution using flexbox and media queries

Jon Erik Ullvang•160
@Ullvang
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey, I am curious about font-size and size of margin, padding etc. Do you usually use px? And is it best to change it with media queries?

Community feedback

  • darryncodes•6,390
    @darryncodesPosted about 3 years ago

    Hi Jon,

    Nice work, I think your design looks great!

    • it's best practice to use relative units instead of absolute units in responsive design. This is just the tip of the iceberg but once you get it right it helps immensely. Worth doing some research on relative units and how to use them.
    • you could clear up your accessibility and html report with a few fine tweaks. Use semantic html <main> instead of your <section> tag. Use a <footer> tag instead of a <div> on your .attribution block.
    • lastly headings should descend in order <h1> > <h2> > <h3> and so on

    Good luck, keep grinding 🤙

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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