Submitted over 2 years ago

Order Summary Component Challenge (flexbox, saas)

Stephan• 50

@cjwelldone

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I am happy to receive feedback on my solution.

Community feedback

AK• 6,700

@skyv26

Posted over 2 years ago

Hi! Stephen, To solve accessibility issues:

wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here
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>

<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>

start your headings with <h1> and move up by one level each time

Good Luck ;)

Stephan• 50

@cjwelldone

Posted over 2 years ago

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

AK• 6,700

@skyv26

Posted over 2 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

Christian Holm• 500

@Madmanden

Posted over 2 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).

Stephan• 50

@cjwelldone

Posted over 2 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.

Stephan• 50

@cjwelldone

Posted over 2 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.

Christian Holm• 500

@Madmanden

Posted over 2 years ago

@cjwelldone Awesome Stephan! 😊

Marked as helpful

Please log in to post a comment

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