QR code component using css

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code could be of interest to you.

  HTML

  In order to fix the accessibility issue:

  • You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

  After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

  CSS

  • In order to center the card correctly, you'd better add min-height: 100vh to the body and you don't need to use margin-top for it:

  body {
    /* margin-top: 10%; */
    min-height: 100vh;
  }
  

  • Also, you don't need flexbox in the .container for this solution

  .container {
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
  }
  

  Hope I am helpful. :)

  Marked as helpful

  0
• 

  Udbhav Dalmia•150

  @UdbhavDalmiaPosted over 1 year ago

  You can surely use px for the div container and the Qr image. And I would suggest you reduce the heights of the elements so they would match the original preview.

  Marked as helpful

  0

  ---

  

  Raeed•10

  @RaeedShealPosted over 1 year ago

  @UdbhavDalmia thanks thats helpful but is there a better way than to use fixed px?

  0