QR Code Component using html & css

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

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

  • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

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

  • If you use flexbox in the body, you don't need to use margin in the .container to center the card
  • If you use max-width, the card will be responsive and you can increase the width a bit

  .container {
    /* width: 250px; */
    max-width: 280px;
    /* margin: auto; */
    /* margin-top: 100px; */
  }
  

  • Finally, if you follow the steps above, you won't need to define media queries for this solution because the card will already be responsive and you can remove them to clean the code

  /* 
  @media (max-width: 375px) {
    .container {
      width: 80%;
    }
  } 
  */
  

  Hope I am helpful. :)

  Marked as helpful

  0