Hi, It is my first challenge here. And I just tried to choose the simplest one among the challenges. Please feel free to write your feedback about the solution. I tried to create a CSS variable for easily updating the colours in the future. Divide the card into 3 blocks:
I really appreciate your support and feedback.
@RanitManik
Posted
give the property to the body
body {
min-height: 100vh;
display: grid;
place-items: center;
}
Marked as helpful
@agshinmammadov
Posted
Thanks for your feedback. I added it. And just forget to centre the card @RanitManik
@RazaAbbas62
Posted
Hi, your design looks good. To center the card, enclose your whole content including card-container and attribution, into a container div and apply the following to the body.
body{
display: flex;
align-items: center;
justify-content: center;
}
it will center your whole card in the body.
Enjoy Coding :)
@agshinmammadov
Posted
Hi, it seems like it will place the cards and text inline. Thanks for your time and support @FazeenIjaz
@RazaAbbas62
Posted
First, wrap your whole content in a separate div, and then it will work fine. @agshinmammadov
@agshinmammadov
Posted
Yes, you are right. And I deleted the text message and its styles @FazeenIjaz
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
