QR-Code-Component - Solution

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 {
    /* padding-top: 2rem; */
    /* position: relative; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • You can add text-align: center to center texts
  • You'd better add padding to give a gap between the content and the border of the card

  .container {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* flex-direction: column; */
    /* text-align: center; */
    max-width: 320px;
    margin: 0 auto;
    background-color: var(--white);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
  }
  

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

  img {
    width: 100%;
    height: 100%;
    /* margin-top: 1rem; */
    border-radius: 10px;
  }
  

  • You'd better update padding in the .text

  .text {
    /* padding: 2rem 1.5rem; */
    padding: 1.5rem 0;
  }
  

  • You don't need to define main for this solution and you can remove it

  /* main {
      max-width: 320px;
      margin: 0 auto;
      background-color: var(--white);
      height: 497px;
      border-radius: 10px;
      transform: translateY(40%);  
  } */
  

  • Finally, you can also remove media queries from your code because the solution will be responsive if you follow the steps above

  Hope I am helpful. :)

  Marked as helpful

  0