FE Mentor QR Code Card

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @JJenk89!

  Your project looks great!

  • Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

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

  body {
      min-height: 100vh;
      display: flex;  /* it works with grid too  */
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1
• 

  gfunk77•1,200

  @gfunk77Posted 10 months ago

  Hi! Great job on your solution. The card looks really nice. Here are some suggestions that might interest you:

  • If you would like to center the card on the screen, add body { min-height: 100vh }. Otherwise, if you like it positioned as is and don't want to add min-height, you can remove the justify-content: center because that is not having any effect.
  • on the .qr-code you can remove the align-content because that is also not having an effect on your code due to the default property of flex-wrap: no-wrap which is applied.

  You can check this out in your dev tools and experiment.

  I mention these things because I love how minimalist your code is. I thought it would be fun to push it even further! I hope these suggestions are helpful!

  Marked as helpful

  1