Skip to content
Submitted over 2 years ago

QR Code Challenge

Ola•40
@O-O26
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 have made changes to code to ensure that it is now visible on Github. I seem to have done most of it but I am not sure what else needs to be done. It seems to be visually similar unless there is a glaring error that I have missed.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    Hello Ola, welcome to the Frontend Mentor community and congratulations for the solution!

    Answering your question: yes, now your solution is visible.

    You did everything right, there's only two small adjustments that you can apply:

    1. You've missed the property height: 100vh; in the <body> is for this reason that your card isnt't fully centered. You'll can also delete from body these two properties margin: 0; and padding: 0; . If you want a space around the card you can add a margin around it, like margin: 24px.

    2. You can also work a little more the padding between the qr code image to have a better match with the design files. If you wrap the card with an container and inside the container you insert the image, the h1 and the paragraph you can fix this padding problem with a single padding of 16px around the container.

    3. You can consider use REM over PX for better results in different screens.

    Overall you did a good job, congratulations and keep coding. See ya.

    Marked as helpful
    1
    Ola•40
    @O-O26Posted over 2 years ago

    @correlucas Thank you for your feedback.

    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