QR code component

Solution retrospective
Thank you for looking at my solution, feedback is always welcome :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾Hello Adriaan Bornman, congratulations for your new solution!
Your solution is really good done, the design is fine, you missed only the responsivity and the card alignment, see my tips for you
To make the card align vertically you've missed
min-height: 100vh
. Heres the code with the fixes:body { min-height: 100vh; font-family: "Outfit", "sans-serif"; font-size: 15px; background: var(--Light-gray); display: flex; flex-direction: column; align-items: center; justify-content: center; height: cacl(100vh - 1px); margin: 1.25rem; }
Give the container
max-width
instead ofwidth
to make the container responsive and contract when the screen changes scaling, changewidth: 400px;
tomax-width: 400px;
@media (min-width: 500px) .container { max-width: 400px; } .container { background-color: var(--White); padding: 1.25rem; border-radius: 0.625rem; box-shadow: 5px 5px 5px rgb(0 0 0 / 5%); margin-bottom: 2rem; margin-top: 2rem; }
👾My rating for this solution: ⭐⭐⭐⭐⭐
Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
👋 I hope this helps you and happy coding!
Marked as helpful - @DavidMorgade
Hello Adriaan, congrats on finishing the challenge, great job!
As Lucas pointed out, the only thing you were missing to center the component was the min-height property.
Apart from that, I would also add some
margin
between the paragraphs and the headings, also try to usetext-align: center
in this particular case I think it looks more legible this way!I would also lower a bit the width of your container, instead of
max-width: 400px
maybe try withmax-width: 350px
, but this are just little tweaks!Hope my feedback helped you!
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