Responsive QR Code Component using Flexbox

Community feedback

• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 2 years ago

  Hello Aviral, You have done a good work! 😁

  • Font sizes are eye to eye unless you are given the size to insert in the code.
  • The approach to Media Queries is very easy: you only use them when the design breaks at a certain screen resolution and you scale the code of the same classes to that resolution read here

  Some little tips to improve your code:

  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of qr image
  • remove all margin from box class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  12

  Marked as helpful
• 

  

  Grace•32,130

  @grace-snow

  Posted over 2 years ago

  That img is the most important content on the page, why have you aria hidden it?!

  Don't use the b element. Set the font weight you want in css

  Body should never have a limited height. Use min height instead.

  Beware using % for border radius. It will have horrible results if used on anything that's not square

  12

  Marked as helpful
• 

  Maca•630

  @Maacaa0

  Posted over 2 years ago

  Hello,

  To answer your first question. I use browser extension called perfectpixel. Which let you put the design image overlay over the page you are creating. It helps you see how accurate you are with your project.

  Hope I helped 😁

  Good work, keep it up.

  11

  Marked as helpful