qr-code-component-main

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @alexcoy06!

  Your project looks great!

  I noticed that you used margin: auto to place the card in the middle of the page. Here's a very efficient (and better) way to center the card, since you used display: flex on the body:

  • Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  alexcoy06•30

  @alexcoy06Posted 10 months ago

  @danielmrz-dev thank you so much, and I really do appreciate. However, the reason the main isn't completely center is because I have a footer in a column flex with it. So it defaults to center vertically with the space that is left over. I couldn't figure out how to get it to ignore the footer and still keep the footer at the bottom. I probably could do it with a grid, but flex was easier, and visually without overlapping an image, looks correct. That's only because it's off center by the exact height of the footer, otherwise it may look closer to the bottom.

  1