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

Order summary component

moonrose93 370

@moonrose93

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@asbhogal

Posted

Hi Isadora, great job! The design matches the mockup well. Just a couple of things I've noticed:

  • Firstly, you should ideally have your background image in a <picture> element in your HTML with the src paths to the mobile and desktop versions which change depending on the viewport width. I've added a link here from MDN about how to do this Link
  • Also, your container element could be placed in a max-width of 300px for eg., with a width: 100% which means it only takes up that size, and anything below that will ensure it occupies the full width. This improves the responsiveness whilst ensuring there's adequate spacing between the container and the browser window. (At the moment its touching the sides of them.)

Hope this helps!

Marked as helpful

1

moonrose93 370

@moonrose93

Posted

@asbhogal you are the best 👌

1

@asbhogal

Posted

@moonrose93 appreciate it, thank you :) glad to help

0

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