QR Code Component using flexbox and SCSS

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

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

  • In order to center the card easily and correctly, you can add flexbox and min-height: 100vh to the body

  body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • After adding them, you don't need to use margin in the .qr-main, you can remove it.
  • If you want to make the card responsive, you can use max-width instead of height and width

  .qr-main {
    /* height: 490px; */
    /* width: 320px; */
    max-width: 320px;
    /* margin: 30px 0; */
  }
  

  Hope I am helpful. :)

  Marked as helpful

  1
• 

  Bader Idris•2,880

  @Bader-IdrisPosted over 1 year ago

  You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

  .container {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

  Marked as helpful

  1
• 

  Panji•2,090

  @pperdanaPosted over 1 year ago

  Hello there👋!! Congratulations on completing this challange.

  • I have some additional recommendations for your code that I think you'll find interesting and valuable.

  📌 Image element do not have alt attributes or you leave it blank

  for example code

  <img src="images/image-qr-code.png">

  In this code you should add alt in your code

  <img 
    src="images/image-qr-code.png"   
    alt="qr code"
  >
  

  • This alt attribute provides alternative text for images, which is important for accessibility purposes. Screen readers, use the alt attribute to read out loud what the image is about, allowing visually impaired users to understand the content of the page.

  I hope you found this helpful! 😊

  Happy coding🤖

  0