QR code component using Basic HTML and CSS and Flexbox positioning

Solution retrospective
On every page I create, I'm still unsure about the dimensions (width and height) of the page's components. In this project I literally counted the pixels with the Photoshop ruler to be sure.
I had difficulty with the spacing between the image, text and the borders. To try to get as close as possible to the model design I used "justify-content: space-around" and added margin/pading to the items individually.
I believe there must be a much easier way to do it than the one I used. But it was well worth the effort.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @derwing
Bro looks amazing! But have a little issue on mobile version.
- @derwing
Sometimes simple is best, use width 100% and use a grid system row and col for position your content and get a better responsive mobile version
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