Submitted 11 months ago

QR Code with Flexbox for Desktop Only

Melinda Eve•30

@hejira42

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

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

gfunk77•1,200
@gfunk77Posted 11 months ago
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
Melinda Eve•30
@hejira42Posted 11 months ago
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
@hejira42Posted 11 months ago
Okay, awesome, I made those changes, and added gap to the card div.

It looks better now! Thanks so much!
0
Melinda Eve•30
@hejira42Posted 11 months ago
Oh, I think I figured it out! Let me edit.
0

Please log in to post a comment

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