QR Component Responsive CSS

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 2 months ago

  Hey, congratulations on finishing this project - you did a great job!

  A few tips to improve your solution even further:

  HTML:

  • <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <main>.

  • The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

  CSS:

  • I would recommend adding 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • 320px is a good max-width for the card, however it should be in rem - change it to 20rem, which equals 320px.

  • Remove max-height on the card. We never want to limit the height of elements containing text, as that can cause overflow if the content grows taller than the fixed height of its container.

  • Do also remove the height in % on the image. Instead, it's quite common to add height: auto for images on the CSS Reset.

  Keep up the good work :)

  1