QR code component challenge

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:

  • You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">QR Card Component</h1>

  • 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:

  • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 320px or 20rem to make sure that the component will have a maximum width of 320px on any device, also remove the width property with a percentage value.

  • Setting a defined height for the card component is not recommended. The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can use min-height.

  • Let the body element occupy 100% of the screen

  
  body {
      /* width: 375px; */
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      /* height: 110vh; */
      min-height: 100vh; /* Use min-height instead of height*/
      background-color: hsl(212, 45%, 89%);
  }
  
  main {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: column;
      background-color: hsl(0, 0%, 100%);
      /* height: 86vh; */
      /* width: 55vh; */
      max-width: 320px; /* Use max-width */
      padding: 1rem 0;
      border-radius: 20px;
  }
  
  @media (min-width: 799px) {
  body {
      /* width: 1440px; */
      /* display: flex; */
      /* flex-direction: column; */
      /* align-items: center; */
      /* justify-content: center; */
  }
  main {
      /* height: 80vh; */
  }
  
  

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  Ahmed Mangood•50

  @ahmed-mangoodPosted almost 2 years ago

  @MelvinAguilar Thanks for your feedback ...

  1