Responsive QR Code but the transition from mobile to web is noticeable
Design comparison
Solution retrospective
How do I make the transition from mobile to web smooth? When I resize the browser slowly, I can notice the transition of the media query.
Is there a better way to center the qr code and put the footer at the bottom of the page?
Community feedback
- @alittlebytePosted over 1 year ago
Personal opinion - you might have overcooked it with that query that you don't really need. The QR container stays at the same size both on desktop and mobile, at least according to the screenshots provided in the starter. Not sure if I'm allowed to post the exact dimensions (figured out by error and trial).
Footer's centering seems fine, could switch from fixed to absolute (since there aren't several screens worth of height in content, wouldn't look drastically different). For the QR container you can also go the position route, adding a transform:translate. Was about to suggest flex on body, but you do have a footer. Would require a second wrapper for the .qr-code div and using the flex on it, so it alone gets affected.
0 - @Stefan3002Posted over 1 year ago
You can't really make it smooth, but you do not have to as you will always be handed the "version" that suits the width of your device. Some browsers smoothen it out, but it is just for aesthetics.
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