Skip to content
Submitted almost 3 years ago

Order Summary Component Challenge (flexbox, saas)

Stephan•50
@cjwelldone
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

I am happy to receive feedback on my solution.

Community feedback

  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    Hi! Stephen, To solve accessibility issues:

    1. wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here

    2. Change your below code

    <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">CjWellDone</a>.
  </div>

    TO

    <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">CjWellDone</a>.
  </footer>
    1. start your headings with <h1> and move up by one level each time

    Good Luck ;)

    1
    Stephan•50
    @cjwelldonePosted almost 3 years ago

    @skyv26 Thanks for helping Aakash. I changed the HTML.

    1
    Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    @cjwelldone Click on report button, it will open new page, there you will get an option generate report. Click on it and you will see Zero Report.

    Marked as helpful
    0
  • Christian Holm•500
    @MadmandenPosted almost 3 years ago

    Hi Stephan. On my phone the mobile view is a bit broken, it doesn’t show the whole component (it’s too narrow).

    0
    Stephan•50
    @cjwelldonePosted almost 3 years ago

    @Madmanden Hi Christian, thanks for telling me. I used the chrome dev tools to check the mobile viewport. On my iphone it works with the chromeApp but not with safari. So I need a fix for safari and maybe browsers, too. I will investigate that.

    1
    Stephan•50
    @cjwelldonePosted almost 3 years ago

    @Madmanden HI Christian, I fixed the issue by changing the max-width within the mediaquey. Now it is possible to see the component without trouble in safari on an iphone. Thanks again for letting me know.

    1
    Christian Holm•500
    @MadmandenPosted almost 3 years ago

    @cjwelldone Awesome Stephan! 😊

    Marked as helpful
    0

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