Skip to content
Submitted 10 months ago

QR code challenge with HTML CSS and flexbox

DoDoingDone•70
@DoDoingDone
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

Solution retrospective

The biggest challenge has been uploading! (newbie problems...) I am coming at coding from a completey non-computer background, so any suggestions on my semantics, best practices, and most noticeably, responsiveness would be greatly appreciated!

Community feedback

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

    Hi there, well done! I'll be happy to give you some tips :)

    HTML:

    • <footer> must be outside <main>, as a sibling, as they are distinct landmarks.

    • Footer text must be wrapped in a <p>.

    CSS:

    • Always include a proper CSS Reset at the top.

    • On body, add flex-direction: column; and a gap of a few rem. When you make the <footer> a sibling of <main>, they both become flex items (children) of the flex container, which is the <body>. As the default value is flex-direction: row, they will appear side by side, which we don't want. The gap creates vertical space between the 2 elements.

    • You should not change the font size to 62.5%.

    • Remove cursor: pointer, it is used for elements like buttons and links, not for the entire page.

    • You don't need margin: auto on .container - it is already centered using Flexbox.

    • I would reduce the max-width on the card to around 20rem.

    • 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
    1
    DoDoingDone•70
    @DoDoingDonePosted 10 months ago

    @Islandstone89 Thank you so much for all the pointers! I am trying the suggestions, and only one is giving me trouble. When I reduce the max-width of the card, it gets very long and thin, completely distorting the look. What might I be missing? Thanks again! I hope that soon this will all be second nature to me!

    0

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