QR code component using Basic HTML and CSS and Flexbox positioning
Design comparison
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.
Community feedback
- @derwingPosted almost 2 years ago
Bro looks amazing! But have a little issue on mobile version.
1 - @derwingPosted almost 2 years ago
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
0@VitorMagnagoPosted almost 2 years ago@derwing Thanks a lot for the feedback. I haven't learned grid layout yet, I'm at the beginning of my studies, grid will be my next topic. But I will take your tips into my future projects.
1
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