Order-Summary Challenge

Solution retrospective
Would love some feedback on my code, cheers!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @FluffyKas
Hey, your solution looks good! If you wanted to fix the few issues you have, here's how you could do it:
-
As mentioned above, using a max-width will make it responsive.
-
To fix the background, add
background-size: contain
. -
To center the card, use these on the body:
min-height:100vh
,display: grid
andplace-items: center
. With this you can get rid of that margin-top as well.
In general, using max/min-width instead of width and min/max-height instead of height is more useful. I'd also just avoid setting height unless it's really necessary (like it is on the body but probably unnecessary anywhere else).
Marked as helpful -
- @syzwnftr
Hi Steven, as a first project I think this is good. But I noticed that it isn't responsive so maybe you can set max-width instead of width for main-box. Make sure to avoid using px because it is an absolute unit. For the accessibility issue, you can get rid of it by changing h2 to h1. I hope this will help.
Marked as helpful
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