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 justify-content: center to the body

  body {
    align-items: center;
    justify-content: center;
  }
  

  • If you use max-width instead of width and height, it makes the card responsive

  .container__card {
    /* width: 18rem; */
    max-width: 18rem;
    /* height: 28rem; */
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better remove height: 60% from the img

  .container__img {
    /* height: 60%; */
  }
  

  • Finally, you don't need .container and you can remove it to clean the code

  /* 
  .container {
    margin: auto;
    max-width: 144rem;
  } 
  */
  

  Hope I am helpful. :)

  0

  ---

  

  Robert Vásquez•70

  @robert-dsPosted over 1 year ago

  Thank you I will consider it @ecemgo

  1
• 

  César Machado•30

  @cmachdevPosted over 1 year ago

  Hi, good work but add

  to center horizontal and vertical add to body justify-content: center; align-items: center; - along with the others you have.

  feel free to delete the property margin: auto; from .container

  0