QR code card using grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Rim, congratulations for your new solution!

  Your solution is great and the container seems perfect. Two thing you can change is the border-radius that is not so rounded and use a value like border-radius: 14px to make the card look better and give it the vertical alignment with flexbox.

  To align it, first of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  Here's the changes I did to your code:

  body {
      display: flex;
      min-height: 100vh;
      font-family: 'Outfit', sans-serif;
      font-size: 15px;
      background-color: hsl(212, 45%, 89%);
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0