Design comparison
Solution retrospective
Positioning Elements in the center was a bit tricky. Would like some feedback as it's my first challenge.
Community feedback
- @djbedfordPosted about 2 years ago
Hey, first off your solution looks really good as it is so good job! You said you found positioning elements in the center tricky, I agree, but using flexbox really helps here. I see in your solution you are already using flexbox so you're already partially there, there are just a few tweaks which should really help. On the class qr-section you can remove the 'margin', 'max-width' and 'max-height' properties and replace them with 'height: 100vh' and 'align-items: center' and that's it, the card will now sit nicely in the center of the screen. By setting the height of the section to be the full height of the viewport, flexbox now has enough room to calculate and position the content in the center by using 'align-items: center'.
For a better explanation you could check out this article on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction
Marked as helpful0@agmonster08Posted about 2 years ago@djbedford Thanks David will implement those resolution ASAP.
0
Please log in to post a comment
Log in with GitHubJoin 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