QR Code Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Daniel3-14 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="container">.

  • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.

  • The container isn't centered correctly. You can use flexbox to center elements. You can use flexbox to center elements:

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

  Additionally, remove the margin to center the image correctly:

  .container {
      text-align: center;
      /* margin: 10% auto; */
      margin: 1rem;
      /* width: 90vw; */
      . . . 
  }
  

  Links with more information:

  • The Complete Guide to Centering in CSS.
  • A Complete Guide to Flexbox (CSS-Tricks).
  • How TO - Center Elements Vertically (W3Schools).
  • CSS Layout - Horizontal & Vertical Align (W3Schools).

  I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  1