Skip to content
Submitted about 2 years ago

Responsive QR-Code Component with CSS Flex-box

blue-mariposa•110
@blue-mariposa
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

I focused mainly on accessibility but I'm not sure I got it right. Please comment on the structure of the HTML layout and element usage. Don't know why but the appearance of the page on GitHub is slightly different from when I view it locally (i.e., using the font offline). It seems the font is not working. Any Idea(s) on how to solve that? Thanks.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @blue-mariposa 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

    Here are some suggestions you might consider:

    • The paragraph element's color is too light compared to its background, making it difficult to read. For example, change the color to hsl(220deg, 15%, 55%).
    • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
    • You can use max-width: 300px to .container selector instead of width: 20%, this will make the card container a bit responsive on mobile and set the element's maximum width to 300px. It will help you avoid occupying too many media queries.
    • Use margin: 0.938rem or margin: 15px in the .container selector so that it has some space when viewed on mobile devices.

    I hope those tips will help you.

    Good job, and happy coding!

    Marked as helpful
    0
    blue-mariposa•110
    @blue-mariposaPosted about 2 years ago

    @MelvinAguilar , thanks for the feedback. It resizes better now. I've updated the page and I feel happy about it. Thanks again!

    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