Order summary component using HTML/CSS
Design comparison
Solution retrospective
-I found it difficult to get the background look like the design, the white waves are too white. -I'm not sure whether the mobile version is narrow enough. -I'm not sure when to use ems versus pxs. Thank you for your input! :)
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Heather Stout , Congratulations on completing this challenge!
🎨 Here are some tips to improve your component design:
Your background is applied but it's not too similar to the design yet. Add
background-size: contain
instead ofbackground-size: cover
to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.Add too thebackground-color: #E1E9FF;
to make contrast between he wave image and the background instead of using white. Addbackground-repeat: no-repeat
to avoid the background image repeating multiple times.Here’s the code with the modification and the image applied as background:
body { background-image: url(./images/pattern-background-mobile.svg); background-size: contain; display: grid; grid-template-rows: auto 1fr; place-items: center; background-color: #E1E9FF; margin: 0; background-repeat: no-repeat; }
✌️ I hope this helps you and happy coding!
Marked as helpful1
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