QR-code-component

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 align-items: center; and min-height: 100vh to the body

  body {
    align-items: center;
    min-height: 100vh;
    /* align-items:flex-end; */
    /* height: 1000px; */
  }
  

  • If you use max-width, the card will be responsive and you can reduce the width a bit
  • You'd better update padding

  .whitebox {
    /* padding: 10px; */
    padding: 15px;
    /* width: 20em; */
    max-width: 18em;
  }
  

  • If you add margin to text, it will look better

  .text h3 {
    margin: 10px;
  }
  

  .text p {
    margin: 10px 10px 20px;
  }
  

  • Additionally, you can remove .img because you don't need to use it

  /* .img {
    width: auto;
  } */
  

  • Finally, if you follow the steps above, the solution will be responsive.

  Hope I am helpful. :)

  Marked as helpful

  1