My version of the QR card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have only one suggestion about your code that might interest you.

  • You can use the following styles to center the element effectively using either of these two methods: For Grid:

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      /* Additional styles if needed */
    }
    

    For Flexbox:

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* Additional styles if needed */
    }
    

    Later, you can remove this margin:

    main, footer {
      /* margin: 6vh auto; */
    }
    

  I hope you find it useful! 😄

  Happy coding

  Marked as helpful

  2

  ---

  

  Gian Ramelb•160

  @rame0033Posted 11 months ago

  @MelvinAguilar thank you for this tip. Honestly, didn't know this since we're using margin all the time during our class.

  Really appreciate this wonderful tip 😄

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @rame0033!

  Your project looks great!

  I noticed that you used margin to place the card in the middle of the page. Here's a very efficient way to center the card:

  • You can apply this to the body (in order to work properly, you can't use position or margins):

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

  I hope it helps!

  Other than that, you did a great job!

  Marked as helpful

  0
• 

  Gian Ramelb•160

  @rame0033Posted 11 months ago

  Any feedback and suggestions will be highly appreciated. Thank you! :)

  1