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

Responsive QR Component using CSS Flexbox

Pogen 60

@IPogenI

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


I think I followed the best practices but if there is anything I can change to improve please let me know. Also if there are some mistakes or things I should consider, please don't hesitate to point it out as I love feedback!

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hi

This looks good on mobile portrait but is broken on landscape because of the height 100Vh. Change to min-height instead

Other suggestions for improvement

  • remove all those brs. They should not be used, let the text break where it needs to
  • you should be using a paragraph tag not a small tag here. Small has a specific semantic meaning - it is for use in smallprint, like supplementary text like footnotes
  • alt text needs improving on this. It should be written as a proper description ie QR code to frontend-mentor.io
  • set img tags to display block and max-width 100%. This common reset means you will not need to give the img a height
  • this card should not have a height or width on it. Instead it should only have a max width (in px or rem would be even better). Block elements are 100% wide anyway, so that max width just stops it getting too large. Height is unnecessary and adding it will cause bugs if people have different font size or zoom settings. Let the card be as tall as it needs to be based off the content within it

I hope this helps

Marked as helpful

2

Pogen 60

@IPogenI

Posted

@grace-snow Thank you so much for your feedback! I can't express my gratitude enough, this is the kind of feedback I have been trying to get for a long time since it's hard to get it when one is self-taught as I am. I will work on improving the problems you mentioned as soon as possible. I want to know when I fix the problems how can I get back to you to check if everything is okay? Once again, thanks a lot for checking my project and for reading this.

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