Responsive Website with flexbox and fixed width
Design comparison
Solution retrospective
I found it difficult to properly align the items without flexbox. I am not sure about media query so I had calculated the width of the QR code container and put in the same value for the smallest of screen size. For the larger resolution I just let the container have the same value. Please suggest if there is a better of doing this
Please have a look at my code and let me know how can I make it follow industry standards.
Community feedback
- @M0hamedMagdyPosted over 2 years ago
Don't worry about centering items without flexbox. It's actually recommended to always use flex and grid systems. But you could also use "margin: 0 auto" on the card element with "width: 100% and height: 100vh" on the body and it will be centered.
You can use CSS relative units like "rems" which is relative to the ROOT font-size and then change it using CSS media queries. that will help you make it more responsive on different screens.
Or you can CSS percentages to let the browser do the calculations for you.
I would recommend web.dev "Learn Responsive Design". It will help you a lot
Marked as helpful2@Gaurab019Posted over 2 years ago@M0hamedMagdy i tried using margin auto but then used a single div with display flex and height as100vh which was easy to use for centering
I have no experience using media query so i did some calculation and put in a fixed width
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