Order summary component (💬 HTML & CSS)
Design comparison
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
- @DavidMorgadePosted about 2 years ago
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 helpful0@alexandre-jolietPosted about 2 years agoHello @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@DavidMorgadePosted about 2 years ago@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 1440pxMarked as helpful0@alexandre-jolietPosted about 2 years ago@DavidMorgade it makes sense now, thank you!
1 -
Please log in to post a comment
Log in with GitHubJoin 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