Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code using CSS Flexbox

@Uttam-Patel

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello community, I am uploading my first solution. Please help me giving the feedback because I am not that experienced in this field.

Community feedback

P
gfunk77 1,200

@gfunk77

Posted

Hey Uttam, Nice job on the qr component. It looks great. Looking at your css I'll just point out a couple of things. Widths on block level elements like divs are 100% by default. So for example, you don't really need .container { width: 100vw }. Also, be careful making images width: 100% . Images can get crazy big and pixelated and won't respond the way you want. Try max-width: 100% and that will let the image be more responsive. In this case, with your image being in a div, you can try max-width: 100%, display: block. You don't really need object fit here. Also, generally speaking, try avoiding putting fixed heights on things. On the card, if your margins are correct, the card will be the size it wants to be and look good. Use min-heights like you did for the container. I hope this helps. Well done.

Marked as helpful

1

@Uttam-Patel

Posted

@gfunk77 Thank you for your valuable feedback. It was very helpful for me. Looking forward to getting this kind of feedback in the future.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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