responsive QR code component make with html and css flexbox
Design comparison
Solution retrospective
I am proud to have made it responsive since it is something that is a bit complicated for me at the moment. Next time I would change using CSS Flex for CSS Grid and implement frameworks like bootstrap, sass, etc.
What challenges did you encounter, and how did you overcome them?I encountered the challenge of putting a small shadow on the container to make it look more realistic, but I solved it by researching and becoming better informed.
What specific areas of your project would you like help with?I would like help with making it responsive, since I know there are other easier ways to do it with media queries.
Community feedback
- @RobinsonGabrielPosted 6 months ago
Overall you matched it pretty well when using even the really small viewports chrome will give you in inspect element, so the size would probably be okay, but of course it looks a little odd at some dimensions.
One thing that I'd point out is your container has px units, which don't scale with the screen. Nothing wrong with that, if you change it to fr, %, etc it's clear sometimes that's not ideal.
This list here is pretty exhaustive of which units are absolute and which are relative: W3Schools is also just a nice resource if you forget any syntax since theres a lot
@media(min-width: 15em){ width: 10em; }
Here's an example of the short query I used for my version of this. It's pretty simple just because I couldn't think of a need to have it respond at a scale any smaller. It's imperfect, but you could also try using a min-width, max-width, min-height, or max-height and use relative units to make some component scale how you see appropriate. I hope that gives you some stuff to fiddle with!
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