Skip to content
Submitted almost 4 years ago

HSL Variables used

Michael Morrison•500
@mjmorrison10
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I feel like a lot of the text were supposed to be smaller than 16px. Or should I have made the entire container bigger?

Code

Please log in to post a comment

Log in

Community feedback

  • Devika Sujith•175
    @DCoder18

    Hi Michael, to answer your question, yes I think increasing the width of your container would definitely help. 16px wouldn't look too big then. I would also suggest making the height of your container auto and control the height using padding. This would help with responsiveness and you don't have to keep changing the height if you make a change to the width :)

    Secondly, instead of using divs for all your elements, I suggest using the appropriate HTML markup such as <h1> for headings, <p> for paragraphs etc. This is very important for accessibility and SEO. This will also fix majority of the accessibility issues mentioned in your report.

    Here are some ways you can fix those issues:

    • Change <div class="container"> to <main class="container">
    • Change <div class="attribution"> to <footer class="attribution"> and so on..

    Here is a helpful resource to understand more about semantic markup: Semantic Markup

    I know this is more than you asked for but I hope it helps anyway :)

    Marked as helpful

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