QR code

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you. 🤗

  HTML

  In order to fix the accessibility issue:

  • You need to replace <div class="attribution"> with the <footer> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

  CSS

  • If you want to center it correctly, you can use flexbox, and it is an easy way to center. You can update your body in this way:

  body {
      background-color: hsl(212, 45%, 89%);
      min-height: 100vh;       // it is usually used as "min-height"
      width: 100vw;
      font-family: "Outfit", sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  • and your .qr-component should be updated like this:

  .qr-component{
       max-width: 320px;    // max-width makes it responsive
      text-align: center;
  }
  

  • If you want to update .attribution position, you can edit .attribution like this:

  .attribution {  
     position: fixed;
     bottom: 0;
     font-size: 11px; 
     text-align: center; 
  }
  

  Hope I am helpful. :)

  0
• 

  Sam•970

  @JustANipplePosted over 1 year ago

  Hi Akisheva, you've done a very good job for this challenge!

  To solve the accessibility reports, just change your qr-component element from "div" to "main" and trying always having everything in an header, nav, main or footer. This makes it simpler for screen reader users to go through your website.

  It might be something you don't want in this challenge, but it will become useful in the future

  Also, to center your div you can use a "display: grid" and "place-content: center" on the body element

  I hope this helps! Keep on going!

  0