Skip to content
Submitted about 2 years ago

QR Code Component Solution

mcddcm•40
@mcddcm
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

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi mcddcm,

    Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

    • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. The alternate text should not be hyphenated, it should be human readable.
    • In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the ``<body>`. Add a little padding to the body that way it stops the component from hitting the edges of the browser.
    body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100vh;
  text-align: center;
background-color: hsl(212, 45%, 89%);
}

    Then you can remove the .container styles.

    Hopefully this feedback helps.

    Marked as helpful
    0
    mcddcm•40
    @mcddcmPosted about 2 years ago

    Awesome @PhoenixDev22 !

    I was racking my mind for the best way to centre the card on the page. Thanks for the elegant solution! I've also modified the alt text for improved accessibility as you suggested.

    Thanks!!

    1
    PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    @mcddcm

    Glad to help. Happy coding!

    0
  • Mohit Soneja•30
    @sonejamohitPosted about 2 years ago

    It's really good, though I think you should add one media query to make it responsive for mobile phones. As it's QR image is overflowing when ratio is below 400.

    Marked as helpful
    0
    mcddcm•40
    @mcddcmPosted about 2 years ago

    Thanks for the feedback @sonejamohit !

    I've resolved that by changing the {height / width} properties of the image from px to % values.

    Pushed the commit to GitHub but I might add a media query in future to reduce the font sizes and/or modify padding on smaller screens for layout purposes.

    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