QR Code Component using CSS Flexbox

Community feedback

• 

  Aimal Khan•2,260

  @Aimal-125Posted over 1 year ago

  In your css code, increase the height of .container class to 120 or 150vh by using media query with max-height: 500px; So that card will be visible on screens with small heights. On my j3 mobile device .container height is short.

  Marked as helpful

  1
• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hey there! Nice job completing the challenge!🙌🏻

  🎯 Some things I would like to suggest:

  • Instead of using div for the container ,you should use the <main> tag like this:

  <main class="container">
  <div class="card">
  <img src="./images/image-qr-code.png" alt="QR code">
  <p id = "important">Improve your front-end skills by building projects</p>
  <p id = "general">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
  </main>
  

  • <main> provides a clear and meaningful structure to your HTML and it helps assistive technologies and search engines understand the purpose and importance of the content within it.

  • Instead of using absolute units like px for font size, you should use relative units like rem for it as they are better for scalable layouts. You can read more about it here!

  Overall your solution looks quite nice!! 🙂

  Happy coding!🕺🏻

  Marked as helpful

  1
• 

  Alexandre Fernandes•160

  @aleafernandesPosted over 1 year ago

  You can review your container proportions and check the text color used on the "improve your front end" text (try this color: hsl(218, 44%, 22%))

  1