
Design comparison
Solution retrospective
It seems like my result is very similar to the preview and I'm proud of it. I know that I use "old" techniques (for example px instead of rem/em ect.) But next time I will try to use them.
What challenges did you encounter, and how did you overcome them?My problem was that the QR code was not in the center. I mean.. It was at the center in a main cross but not in the center of the webpage. It was too high. I used a margin but it was not good solution. But then I relized that I can use min-height: 100vh;
and min-width: 100vh;
and that solved my problem. I hope it is the "right" way.
I'm not sure about sizes. How do I figure out if I should use 300px or 350px? In this case.. I guesstimated it. Maybe I'm little bit dumb and there is a chance that I overlooked it in instructions. I'm not sure about it.
Community feedback
- @KapteynUniversePosted 18 days ago
It doesn't have to be pixel perfect but this is a free+ challenge, figma file has everything you need. Also no need to use
min-width: 100vh;
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).min-height: 100vh;
with flex or grid is enough for centering.Marked as helpful0
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