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

Flexbox summary component

@ArthurWiliams

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


Any feedback is welcome.

Community feedback

P

@Miculino

Posted

Congrats on completing the challenge, @ArthurWilliams!

Your solution looks really good, both on desktop and mobile screen sizes. Just a few suggestions based on your final solution and Github code:

  • Make the card a bit smaller on desktop screen sizes - consider adding some padding around it

  • Fix the positioning of the background image on mobile screen size

  • Use more classes in your HTML code - there are still quite a few HTML elements that don't have any classes set on them

  • Consider storing your SCSS variables in a separate file

  • You don't need to set height: 100% on html, body, main. You can simply use min-height: 100vh

Marked as helpful

3

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