QR code component using CSS Flexbox

Community feedback

• Account deleted

  Hey Mahad, congratulations on completing the challenge 😉

  Some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
  • remove height from .container class because isen't necessary
  • remove all margin from .container class because with flex they are superfluous
  • use min-height: 100vh instead of height to the body
  • instead of using px or % use relative units of measurement like rem -> read here it's much better!

  Hope this help! Happy coding 😁 by Travolgi

  Marked as helpful

  0

  ---

  

  Mahad Aamir•100

  @mahadaamir35Posted over 2 years ago

  @travolgi Thank you for the feedback. I will try to use these tips in the future.

  0
• 

  Mohammed Lahboub•570

  @mohammedlahboubPosted over 2 years ago

  Hi @mahadaamir35 since you used display flex on the .container u could use gap:0.8rem; instead of margin-top:0.8rem;
  check this: https://developer.mozilla.org/en-US/docs/Web/CSS/gap

  And to create an equal white space around the items inside .container just use padding (make sure to remove the margin-top from the img)

  Marked as helpful

  0

  ---

  

  Mahad Aamir•100

  @mahadaamir35Posted over 2 years ago

  Hi @mohammedlahboub I tried using padding in the .container div to create equal white space and removed margin-top from the img after your suggestion. Thanks for the feedback.

  0