Skip to content
Submitted 2 months ago

Updated version using Flexbox

#pure-css
Jas•180
@ajasmine94
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

What are you most proud of, and what would you do differently next time?

This time I was able to utilize something I learned recently which is Flexbox and the use of other units of measurement which really made things easier compared to using fixed width and so on. I think if I were to improve on this again, I would try using the Grid version!

What challenges did you encounter, and how did you overcome them?

I think what I encountered this time is the image? It wouldn't fit the container / card so I had to use max-width: 100 to fit it in there, but I'm not so sure if that is the correct solution.

What specific areas of your project would you like help with?

I am not so confident if I did well so any feedback in terms of how I fit the items or the use of flexbox would help :) thank you!

Community feedback

  • Josh Kahlbaugh•110
    @Joshk7Posted 27 days ago

    A mistake I made for accessibility is not wrapping all of the content within the QR code card in a <main> html tag. Your flex box atttributes look good but the text content below the QR code could be improved by setting these in css:

    .card-title {
text-align: center;
}

.card-description {
text-align: center;
}

    You could also set border-radius to 10px of the QR code image to round the edges of the QR code.

    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