Simple Responsive QR code component solution

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  Greetings ukanlei

  Well done on your first challenge. As mentioned by Vanza , you need some padding to leave some space for the card not to touch the edges.

  • set the img width to 100% so that it becomes responsive , try using dev tools - you will see that as the site gets smaller , the image stays the same causing it to overflow the containers.
  • on font sizes, i would encourage to use rems instead of px. The reason behind that is because px are fixed values and have a tendency of overwriting system settings. The following article will give you a better explanation Why designers should move from px to rem

  Happy coding

  Marked as helpful

  1

  ---

  

  Ukan•20

  @ukanleiPosted over 2 years ago

  @ChamuMutezva Thanks for the feedback and great article reference! I was noticing a lot more usage of rem instead of px and the article really helped me understand why there's a shift to it.

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Ukan! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Great job on completing this challenge without any media query! 👏

  There are two things that can be improved.

  • Firstly, I would recommend adding some padding on the body element so that the card doesn't touch the browser to edges. Currently, on mobile landscape view, to be specific on 640px * 360px, the card touches the top of the browser.
  • Secondly, the alternative text for the QR code should not be hyphenated. It should be human readable (not like code). A great example would be, the QR code for Frontend Mentor.

  I hope this helps! Keep up the good work! 👍

  Marked as helpful

  1

  ---

  

  Ukan•20

  @ukanleiPosted over 2 years ago

  @vanzasetia Thanks for the feedback! Definitely will implement them once I get the chance. Alt text is something I always forget, or I guess more like "take it for granted" so it was great that you noticed 😃

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @ukanlei You're welcome! 😉

  0
• 

  beshoy•80

  @beshoyyatefPosted over 2 years ago

  Hey there, Great job keep going

  About your accessibility issue you shouldn't use a section inside a div you just can use another div inside the box, and in the mobile it will be better if you dicrease the font size and the box size a little.

  1

  ---

  

  Ukan•20

  @ukanleiPosted over 2 years ago

  @beshoyyatef Thanks for the feedback and suggestion!

  0
• 

  George Stawowczyk•210

  @Jorgus1710Posted over 2 years ago

  Card looks great!

  I wonder if its just me, but the mobile view for me shows no margin on your card (.box), so basically making the edges of the card occupy the whole screen horizontally. I wonder if adding a margin to .box would help with that? Im on Samsung Galaxy S9.

  Keep up the good work!

  0

  ---

  

  Ukan•20

  @ukanleiPosted over 2 years ago

  @Jorgus1710 Thanks for the suggestion! Considering other feedbacks mentioning similar issues with the mobile display I think it's safe to say it's not just you 😅

  0