Skip to content
Submitted over 1 year ago

Responsive QR Code Component using CSS Flex

Dylan Rono•20
@NeoDyln
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • I came to realize I actually need to practice Flex and Grid designs more
  • Nonetheless, it was a great starter challenge and I'm looking forward to solving more challenges
Code

Please log in to post a comment

Log in

Community feedback

  • P
    Øystein Håberg•13,260
    @Islandstone89

    Hi, congratulations on your first project. Here are some tips.

    HTML:

    • You need a <main> that wraps the main content. Change the .card-container from a div to a main.

    • .attribution can be a <footer>, which is another important landmark.

    • You don't need an ID on the image in such a simple challenge. In any case, it's more common to use classes.

    CSS:

    • <body> is width: 100% by default, so no need to set that property.

    • Remove the margin on the card. You can center the card horizontally and vertically using Flexbox on the body:

    display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center

    • max-width should be in rem.

    • Image should have max-width: 100%

    • Remove max-width on heading and paragraph.

    • Font-size should be in rem, never in px

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