QR code component

Solution retrospective
I'm proud of that I made something with css, and that I used figma for the first time.
What challenges did you encounter, and how did you overcome them?The body element not filling the entire sceen.
I solved that by setting the height of the body to 100vh
.
I can see now that the I probably didn't account for the padding when setting the box size...
Also - working with fonts I find a bit difficult.
What specific areas of your project would you like help with?I'd love some feedback about best-practices, especially when it comes to css!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ricardoychino
Hi, great job with the solution.
I just wanted to leave some tips:
- Instead of fixing the
height
ofbody
to 100vh, is better to set themin-height
to 100vh. This makes the layout more dynamic and kind of ready for future changes - You can use
line-height
with1.4
instead of140%
, for example. Not exactly a best-practice, but is more common this way and it is a bit cleaner - Inside a flexbox, margins "pushes" spaces as possible, so to center
.card-container
insidebody
, you could:
body { display: flex; } .card-container { margin: auto; /* This pushes spaces in all four directions and centers the element inside the parent */ }
- This is something I personally think is a better practice, but nothing wrong if you don't want to: using
box-sizing: border-box
in whole stylesheet
Marked as helpful - Instead of fixing the
- @Ifehj
looks pretty good on various screen types.
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