Design comparison
Solution retrospective
I have doubts about the background of the screen, I think the colors it brings are different from the one in the challenge photo, so I put a shadow on the box to make it stand out.
Community feedback
- @HassiaiPosted almost 2 years ago
Give the body a background-color and give the body a background-size value contain. give the img a max-width of 100% and display: block instead ofgiving it a fixed max-width value.
Use rem or em as unit for the max-width instead of px.for more on CSS units watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful
Well done for completing this challenge. HAPPY CODING
Marked as helpful0 - @Hazel-BlackPosted almost 2 years ago
The only issue I can see (just off fist glance ) is you forgot to add a background color to the body. I did this challenge a while back and the background-color for the body should be hsl(225, 100%, 94%);. I did the project very early into my learning process but here is the code if you want to take a look. https://github.com/Hazel-Black/Order-Summary
Marked as helpful0 - @VCaramesPosted almost 2 years ago
👾 Hey there! 👋 Here are some suggestions to help improve your code: 👾
- Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.
Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.
- The “illustration” serves no other purpose than to be decorative; it adds no value. Its
alt tag
should left blank and have anaria-hidden=“true”
to hide it from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🎄🎁
0
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