Skip to content
Submitted 10 months ago

QR Code Card Component

Awoniyi Samuel Oluseyi•140
@quest82
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 10 months ago

    HTML:

    • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor.io).

    • .attribution should be a <footer>.

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.

    • 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.

    • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

    • Remove the width in % on the card - the padding on the body makes sure the card never touches the edge on smaller screens.

    • max-width should be in rem.

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

    • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

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

    Marked as helpful
    0
    Awoniyi Samuel Oluseyi•140
    @quest82Posted 10 months ago

    @Islandstone89

    Thanks for the corrections, I'll implement them in this project and use them in future projects

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord