QR Code Component. Used HTML, CSS and Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Kirin! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Good job on this challenge! 👏

  I would like to recommend is that you could essentially finish this challenge without any media query at all by specifying a max-width on the .container element. Also, I would recommend setting a min-height on the body element instead of a height. Currently on mobile landscape view (360px * 640px) the card gets cut off.

  That's it! I hope this helps! Keep up the good work! 👍

  Marked as helpful

  2
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Kirin, good job! I took some time to look at your code and have some ideas for improving it:

  • add main tag and wrap the card for improve the Accessibility
  • remove all margin from .container class because with flex they are superfluous
  • instead of using px try to use relative units of measurement -> read here
  • as @vanzasetia already said it sets min-height to body instead of height

  Overall you did well 😉

  Hope this help and happy coding!

  Marked as helpful

  1

  ---

  

  Kirin•40

  @jhsanchezmPosted over 2 years ago

  @denielden Thanks for your advise, I will try to use em instead of px ;)

  1
• 

  Sarah Watkeys•30

  @SarahWatkeysPosted over 2 years ago

  Hi Kirin One suggestion that I was given that helped improve the accessibility report was to use things like <main> and <footer> tags, instead of <div> tags. My original had the same accessibility issues as you, but this took care of it.

  Marked as helpful

  1

  ---

  

  Kirin•40

  @jhsanchezmPosted over 2 years ago

  @SarahWatkeys Thanks Sarah, I had the same question about accessibility ;)

  0
• 

  Kirin•40

  @jhsanchezmPosted over 2 years ago

  Thanks for you advice sir. I will follow you recommendations :)

  0