Boris• 2,870
@mkboris
Posted
What you are looking for is align-items: center, also add a min-height: 100vh on the body. Add these two on your body and remove the transform: translateY(25%) from the .card and it will be centered properly.
1
Design comparison
Solution retrospective
What are you most proud of, and what would you do differently next time?
I am proud that I was able to implement the font-family that I was trying in the QR Code challenge.
What challenges did you encounter, and how did you overcome them?
Trying to fit the contents of the card to look the same as the examples.
- don't know if I got this one tbh. Also the spacing between each element in the card.
- split into two different grid-template-area. Couldn't quite figure out how to centre the card vertically. Same as the previous challenge. To centre the card vertically, I used transform: translateY.
What specific areas of your project would you like help with?
Still not sure if I'm using the right way to centre the card vertically. I know the justify-content: centre is working for the horizontal axis, but when trying to use align-content for the parent element or align-self for the card element itself, there is no change.
Community feedback
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