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

HTML + CSS pixel perfect order summary component

Roberto 30

@mayanhavoc

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


Please feel free to critique.

Community feedback

@B1N4R1

Posted

Hey Roberto!

Firstly congrats on completing the challenge! Your solution looks good!

Here some pointers:

  • You should really get rid of the min-width: 1440px in the 1440px media-query. This is just streching the card way to much
  • Try using lesser height definitions like you do in the div.main element, you can get rid of that height. Also when creating buttons, don't use like a height: 40px it's better if you use padding like a padding: 15px
  • Try using more semantic html and not so much divs, here an article about it.

There is always room for more improvements but for me this are the more pressing ones in your case

Hope this helps,

Cheers!

PS.: You should also look at the report and try to fix the errors it tells you

Marked as helpful

1

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