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 (💬 HTML & CSS)

Alexandre JOLIET• 170

@alexandre-joliet

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


Hello community!

This is my solution for the Order summary component challenge.

No issue encountered on this project but I'll be happy to hear any feedback and advice to improve my code!

Community feedback

David• 8,000

@DavidMorgade

Posted

Hello Jojorider, congrats on finishing the challenge! your solution looks pretty good for me and its also responsive, great!

Just some suggestions that can maybe help you in future challenges:

  • Try to don't limit the max-width, this is making your image look centered at 1440px but it gets on the right part of the screen on bigger screens!, if you remove it your image will still be perfectly centered.

  • Also for the background-image, I would add background-size: contain to get it in your fully body, the default options make it broke at 1500px~ with contain you will never lose the image from the background.

And I think that this is it, the rest looks perfect for me, hope my feedback helps you in future challenges!

Marked as helpful

0

Alexandre JOLIET• 170

@alexandre-joliet

Posted

Hello @DavidMorgade!

Thank you very much for your feedback and for the tips! Awesome!

In general, how should I take into consideration the info on the "style-guide" file when they are mentionning Desktop: 1440px? As a guideline or something I do not need to pay attention to?

Thanks!

1
David• 8,000

@DavidMorgade

Posted

@JojoRider That means that you should style at a desktop size from 1440px, for example using @media(min-width: 1440px), also consider that the FEM solution screenshot and the guide desktop image is also 1440px

Marked as helpful

0
Alexandre JOLIET• 170

@alexandre-joliet

Posted

@DavidMorgade it makes sense now, thank you!

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