Design comparison
Community feedback
- @NeonCodesPosted 3 months ago
Hello, Good job completing the challenge! The design is pretty close to the original.
First, the positive:
- Your code is very concise and well-organized so we don't get lost while reading it (special mention for the
#description
selectors and@media
in the stylesheet) - Didn't know
font-optical-sizing
existed, that's nice. - The card is well-centered and sized with flexbox.
Second, potential area of improvement:
- The
h1
seems slightly too big. You can tryfont-size:22px
( or convert them to rem using a converter like Calculatorway)
I hope it helps. Happy Coding!
0 - Your code is very concise and well-organized so we don't get lost while reading it (special mention for the
- @KitalpharPosted 3 months ago
Great work!
Due to having used
vw
units for the containerwidth
the container grows wider than probably intended, but it did gave me the idea of maybe using theresize
CSS property, or adding an option to enlarge the image on hover. In the future in case on the design i'm working on the image is small it could help the camera pick the QR code up better. Just food for thought...0 - @starberriesPosted 3 months ago
Hey @Perry2004, great work! I learned a few interesting things about font properties from looking through your styling, I didn't even know
font-optical-sizing
was an available property, so that's really cool.I did notice your container size has a lot of variability based on screen size. If you're interested in giving it a more controlled size range, I can suggest using
max-width
in place ofwidth
and utilizingrem
units for measurement. Here's how I set up the container size for mine if you'd like a comparison:.container { max-width:20rem; min-height: 31rem; }
If you need any info on
rem
andem
, I myself was just recommended this page on the subject, but essentiallyrem
units are based on the root font size, so1rem
by default would be16px
.Anyway, great work with the challenge, keep it up!
0
Please log in to post a comment
Log in with GitHubJoin 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