QR-Code-Component

Community feedback

• Account deleted

  Hi 👋 Congrats on finishing the challenge!

  You solution looks very good, it's almost the same as the design. The only issues is that is bigger than expected, but you can change that easily.

  The width of the QR code container should be around 320px (not 370px). Also the font size of the paragraph is 15px, and the font size for the heading is 22px. Adjust margins and paddings accordingly and you should have the exact same design as requested.

  I hope this was helpful.

  Happy coding! 👨‍💻

  Marked as helpful

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  Just a few REALLY important issues you need to fix on this. It is broken on some obile screens and inaccessinble at the moment. I made changes in browser with notes. Have a look through, open dev tools on the side, use emulator often, resize the viewport often, zoom in/out often - all of these you should be doing as part of natural dev process

  .container {
    /* height: 100vh; */
    min-height: 100vh; // so content doesn't get limited / cut off on small screens
  }
  
  .qr-code {
    /* width: 370px; */
    max-width: 370px; // better if in rem; Let card shrink on small screens if needed
    margin: 1rem; // prevent component from hitting screen edges on small screens
  }
  
  img {
    note: ALT text is essential on this, it's the most important content on the whole page. What is this image and where does it go?';
    display: block; // standard CSS reset
  }
  
  

  0