What specific areas of your project would you like help with?
I can't seem to get it away from the top without using a margin/padding value, is there a way to do this with a flexbox?
@Rabelahmed
Posted
display: flex; align-items: center; justify-content: center; min-height:100vh;
Try this on the parent element of your card component
Marked as helpful
@R3Aria
Posted
@Rabelahmed Thanks for the help, I was missing the min-height as I had no knowledge of it.
@Rabelahmed
Posted
@R3Aria happy to help
@IzykGit
Posted
Good work!
I noticed in your CSS that you are using margin to create space between your elements and the edges of the card. In CSS there is an attribute called padding that will automatically create even spacing between all elements and the edges of the parent container!
So in your .card class you would want to set the padding to 24px so that way it creates a 24px gap between all the elements and the card itself.
Keep up the good work!
Marked as helpful
@Rabelahmed
Posted
On the body element for your solution and congrats on completing the challenge
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
