Design comparison
Solution retrospective
I had trouble implementing the image of the product with the IMG tag because the columns weren't even, so I used a background div instead for the Desktop design.
Community feedback
- @elaineleungPosted over 2 years ago
Hi Dario, great attempt here! I think you had some creative ways of solving this challenge. Some suggestions I can give you:
- To center the card, I would remove all the
position:fixed
along with theleft
andtop
as well as thetransform
property; in the body, I would add these lines tobody
:
body { display: grid; place-content: center; min-height: 100vh; }
-
It's important to use reset rules, and ones of the most important ones is the box sizing because that could determine whether things are looking right or not. I see that it has a value of
inherit
right now; I would change that toborder-box
instead. -
For the image, next time you can try using
object-fit: cover
instead, which is similar to thebackground-size
property. -
Lastly, for the
.card
, I think you can just remove that 2rem gap and change the padding oncard__info
to 2rem instead!
Marked as helpful0 - To center the card, I would remove all the
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