QR Code Component: centered vertically and horizontally using position

Community feedback

• 

  Yazdun•1,310

  @YazdunPosted over 2 years ago

  Hey man good job on the challenge. This project doesn't need any grid so it's fine the way you've done it ( although I can argue that it doesn't need any flexbox either 😅 ).

  The other thing is I don't see any need for media queries in this challenge. instead of using static width for the main__container , you can use something like :

  .main__container {
    width: 100%;
    max-width: 270px;
  }
  

  With the above's approach, You won't need any media queries, main__container will occupy 100% of the screen and when it reaches 270px width, It will stop growing. You can give some paddings to the parent element to prevent main__container from hitting the screen's edges on mobile devices.

  Overall you did great, Keep it up.

  Marked as helpful

  0

  ---

  

  P

  Dilhan Boca•220

  @dboca93Posted over 2 years ago

  @Yazdun

  Thanks so much for your feedback ! I really appreciate it.

  All the best :)

  1
• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey! Congratulations on completing this challenge... You have accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <div class="main__container">
        //...
     </div>
  </main>
  

  • All page content should be contained by landmarks, Contain the attribution with <footer>.

  <footer>
     <div class="attribution">
        //...
     </div>
  </footer>
  

  • I suggest you use REM for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed.

  See this article ---> CSS REM – What is REM in CSS?

  I hope this is helpful to you... Amazing work. Keep it up! 👍

  Marked as helpful

  0

  ---

  

  P

  Dilhan Boca•220

  @dboca93Posted over 2 years ago

  @Bayoumi-dev

  Thanks so much for your feedback ! I really appreciate it.

  All the best!

  0