QR code component solution

Community feedback

• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi @PivtoranisV,

  Congratulations 🎉 for completing this challenge, it was a great attempt. The card looks great however there are some issues I want to address.

  1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
  2. Also, you should wrap the footer within the footer tag e.g. <footer class="attribution"></footer>
  3. Instead of having a position property with a value of absolute, you should use the flexbox property to center the card. You should remove the position property and the transform property too.

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--neutral-color-100);
    flex-direction: column;
  }
  

  I added the flex-direction property since you have a footer and it would be aligned under the card, with the flex-direction property.

  Also, you should give your card a max-width property instead of the width property to make it responsive. Then you can give the body a padding of 0 20px, to prevent the card from touching the side of the screen.

  Overall, great attempt and wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  0

  ---

  

  Volodymyr Pivtoranis•60

  @PivtoranisVPosted about 2 years ago

  @romila2003 Hi, thank you for your feedback, will change that in my code

  1