Nice job on your solution. Try putting the padding on the card, not the image. You don’t really need the margin auto on the image either. You can do max-width: 100%, and your border-radius: 8px. I hope that helps.
Marked as helpful
1
Design comparison
Solution retrospective
Here is my first solution submitted - the QR Code project.
I struggled with sizing/alignment of the card and image inside, as well as with padding/margins, but I think I got those down.
I DO NOT understand why the img border-radius is not showing and would LOVE help troubleshooting this. I can't see any reason it's not applied in Chrome dev tools.
I would also love feedback on how to improve my CSS - is it DRY? am I using best practices?
I'm really new to learning front end (haven't started js yet) - I'm trying to spend some time with CSS to make sure I understand positioning well enough.
Thanks in advance <3 !
Community feedback
Melinda Eve• 30
@hejira42
Posted
Thanks so much for taking the time to look at this.
I did as you suggested - moved padding to card and changed max-width on the image to 100%, but still not getting the border radius on the image?
I've updated the code.
1
Melinda Eve• 30
@hejira42
Posted
Okay, awesome, I made those changes, and added gap to the card div.
It looks better now! Thanks so much!
0
Melinda Eve• 30
@hejira42
Posted
Oh, I think I figured it out! Let me edit.
0
Please log in to post a comment
Log in with GitHub
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