QR-code component HTML CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

  HTML:

  • Use the <main> tag to wrap all the main content of the page instead of the <div class="container"> tag. With this semantic element you can improve the accessibility of your page.

  • Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS:

  • Centering an element with position: absolute would make your element behave strangely on some screen sizes, "there's a chance the content will grow to overflow the parent". You can use Flexbox or Grid to center your element. You can read more about centering in CSS here.

  body {
      background-color: #D5E1EF;
      place-content: center;
      display: flex;
      /*Add this to center */
      min-height: 100vh;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  
  .container {
      /* position: absolute; */
      background: white;
      max-width: 360px;
      min-height: 600px;
      /* top: 15%; */
      /* left: 25px; */
      border-radius: 25px;
      padding: 15px; /* Add a padding*/
  }
  
  .container img {
      /* position: absolute; */
      /* width: 320px; */
      width: 100%;
      /* top: 18px; */
      /* left: 18px; */
      border-radius: 15px;
  }
  .text #title {
      /* position: absolute; */
      /* top: 350px; */
      /* left: 25px; */
      . . . 
  }
  .text #desc {
      /* position: absolute; */
      /* top: 450px; */
      /* left: 25px; */
      . . . 
  }
  

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1