Responsive card solution using Flexbox and CSS variables

Solution retrospective
I feel like my code is not very "clean" and optimized. What could I do better? I also had difficulties centering the card vertically (I´ve done it with margin, but must exist better ways)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ratan17
I see that you've used flexbox to center the card container which is a right approach. Your flexbox is only horizontally centered but not vertically. That's because you have to set height to the flex container which is your
body element and then use another flexbox propertyalign-items: center
. This will center your card container both horizontally and vertically.It would look like this:
body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; }
use min-height instead of just height.
If you want to get a good grip on flexbox I would suggest you to play this game: Flexbox Zombies Game
Marked as helpful - @buneeIsSlo
Hey! @Anna60991, Great job on this challenge. The page responds pretty well and your code looks good too. Centering elements does get a bit tedious sometimes, I struggle with it too.
I suggest taking This free course by Kevin Powell. In this course he covers some really important topics which should help you gain a better understanding of responsive layouts. Hope this helps :)
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