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

Responsive Stats-Card Solution

@ironheart93

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


This is my code for the stats-card solution. I really struggled to change the image color, and this is my first time using Flexbox on a project. Any feedback is welcomed and appreciated! :)

Community feedback

@pikapikamart

Posted

Hey, good work on this one. Though the desktop layout is pushed onto the top but the mobile view is good.

For the image color, since you used the image as img, you could add a background-color: hsl(277, 64%, 61%) (purplish one) on the imageContainer selector. Then just manipulate the opacity of the img that holds the image. That way, the purple color will now be visible and adjust to your preference^

Other suggestions would be:

  1. To center your layout on the desktop, you could add in the body like:
display: grid;
min-height: 100vh;
place-content: center;
padding-top: adjust to make the layout not touch the ceiling
  1. On the text, they should not be centered right. So in your description selector, remove the align-items: flex-end, let them be at the left position. But by doing so, your elements inside the stats container will be pushed more on the left, because you used position: relative and used the right property on them. It will be really awesome if you could remove them, since they are not really necessary on this one.

2.1. Remove the padding on the stats selector, also edit the padding on the 3 divs inside of it. Only apply padding to the top and right, like `padding: 50px 25px 0 0;

  1. The width of the layout could be smaller :>

But still, good job on this one ^

0

@ironheart93

Posted

@pikamart Thank you, I made some changes, it's not exactly perfect but I understand a little better as to what I am doing.

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