Responsive QR Component page using Flexbox.

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 months ago

  Hi Ayush, you did a good job!

  Here is some feedback I hope you find helpful :)

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change .container to a <main>.

  • The alt text must also say where it leads(frontendmentor.io).

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Remove all properties on .container.

  • Remove the margin on the card.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container.

  0

  ---

  

  Ayush Yadav•140

  @ayushyadavzPosted 8 months ago

  @Islandstone89 I have updated the Code according to your approach. Can you please check it now and tell me if i did it correctly or not?

  1

  

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 months ago

  @AayushYadavz well done. There are only a few small adjustments left:

  • Remove the <div> between <main> and .card. Your structure should look like this:

  <main>
     <div class="card">
         <img>
         <div class="text">
             <h2>
             <p>
         </div>
     </div>
  </main> 
  

  • Change alt text to "QR code leading to the frontend mentor website".

  • The default value for font-size is 1rem, so you don't need to declare that explicitly.

  Keep up the good work :)

  0

  

  Ayush Yadav•140

  @ayushyadavzPosted 8 months ago

  @Islandstone89 I have submitted 2 more solution of some challenges can you please review them and tell if there is need to change something because I love your review.

  1