Mobile First QR-code Component

Community feedback

• 

  Luis Jimenez•720

  @LuisJimenez19Posted over 1 year ago

  Hello, I congratulate you for having finished the challenge

  For better control when you have few elements, it is better to manipulate the container and not the content, You can add flex-direction:column; to the body to have the card above the attribution section and a justify-content:center; to the center so you don't use margin on the card. something like that:

     body {
      font-family: 'Outfit', sans-serif;
      background-color: var(--lightGrey-clr);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      gap: 30px;
  }
      
      .card {
      background-color: var(--white-clr);
      padding: 15px;
      text-align: center;
      border-radius: 17px;
      /* text-align: center; */
      /* margin: 0 1rem; */
      max-width: 300px;
  }
  
  .container {
      /* max-height: 100vh; */
      /* margin: 0 auto; */
      /* display: flex; */
      flex-direction: column;
      justify-content: center;
  }
  

  If you want, you can remove the container, so it could look a little better, I'll leave you with the task of adding a shadow so it would look prettier, I hope my contribution is helpful, gambaree.

  0