Desktop-first QR code component

Solution retrospective
Here's my attempt at the design. I would like some feedback on how to make this mobile responsive, I'm not sure the media query I used is quite right. Thanks!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Nick-Gabe
Good work, very organized html! :)
I noticed your qr-code is on the upper left. A tip I give is that to center the container on the screen, one option is using flexbox on the body and defining a height (100vh is good for desktop, but doesn't work well for mobile) and a witdh (100%).
body { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; }
Links if you want to see more: Flexbox, Css Units(vh, vw...)
Marked as helpful - @GitHub-dev12345
Use this code in the body tag :-
Padding :10px; Margin : 110px auto: Width: 100%; Max-Width: 1440px;
Marked as helpful
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