Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats preview card component

@nmrtsnh

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone,

I am Namrata and this is my solution for this challenge.

If you have any suggestions to improve my code, please feel free to share!

Thank you 🙏

Community feedback

@matiasluduena23

Posted

Hi Namrata Sinha’s! Congratulation you finished the challenge! Just one advice that might help you with this and other projects.

  • Notice that both sides of the card have the same width. To make that you can use grid or flex.

With grid

.container {
display: grid;
grid-template-columns: repeat(2, 1fr)
max-width: 700px; // play with this number
}

With flex

.container {
display: flex;
max-width: 700px; // play with this number
}

.container-details , 
.container-img {
width: 50%;
}

Hope this help you!

Good code!

Matias

Marked as helpful

0

@nmrtsnh

Posted

@matiasluduena23 Thank you for the feedback! Make sense. I'll implement this one.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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