Flex

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi tony1610,

  Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

  • You should use <main> landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user: like QR code to frontend mentor not describes the image. The alternate text should not be hyphenated, it should be human readable.

  • Add min-height: 100vh instead of height: 100vhto the body that let the body grows taller if the content outgrows the visible page instead.

  • An element with width:100vw can extend below the vertical scrollbar of your browsers, inducing the apparition of horizontal scrollbars along with an unwanted side scroll. Use width:100% to the body instead will extend across the viewport but will always stop at the scrollbar.

  There are a lot the arguments against the 62.5% font size trick ,it state that you should never change the root font size because it harms accessibility.

  Overall, Excellent work! Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  tony1610•410

  @tony1610Posted over 2 years ago

  @PhoenixDev22 got it, thanks for the feedback!

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @tony1610 Happy coding!

  0