Skip to content
Submitted about 2 years ago

QR code component

Yacine Kahlerras•820
@yacineKahlerras
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 tried to make this one as pixel perfect as possible by measuring elements from the design on figma.

also i tried to familiarize myself with figma since i never used it before, turns out its pretty much like illustrator so i kind of found myself at home

Community feedback

  • Adriano•38,270
    @AdrianoEscarabotePosted about 2 years ago

    Hello @yacineKahlerras, how are you?

    You did a great job on this challenge, I really liked your layout and congratulations on achieving a pixel perfect.

    Figma really helps a lot, I have some tips that I think you will like:

    1- I noticed that the layout is breaking at 320px, I made some changes to the code to further improve the responsiveness of the project:

    @media (max-width: 320px) { main { width: 100%; } img { width: 100%; } }

    The rest is really good! Hope it helps... 👍

    Marked as helpful
    0
    Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    @AdrianoEscarabote done, thank you 🙏

    1
    Adriano•38,270
    @AdrianoEscarabotePosted about 2 years ago

    @yacineKahlerras no problem! keep coding

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

    Hi Yacine Kahlerras,

    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.
    • 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. Then you can remove the position absolute from the <main>
    • width: 21.27rem; an explicit width is not a good way to have a responsive layout. Consider using max-width to the card.

    Hopefully this feedback helps.

    Marked as helpful
    0
    Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    @PhoenixDev22 done 👌 thanks for the body padding trick am gonna use that in the future

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

    @yacineKahlerras

    Glad to help. Happy coding!

    1
    Yacine Kahlerras•820
    @yacineKahlerrasPosted about 2 years ago

    @PhoenixDev22 I also have a question is using the absolute translate(-50%,-50%) thing to center elements bad and doesn't work on some devices ?

    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