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 using flexbox and grid

P

@cganzon

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


I tried my best to recreate the designs as pixel perfect as possible when viewing at the specified screen widths. Any feedback is welcome!

Community feedback

Vanza Setia 27,875

@vanzasetia

Posted

👋 Hi Cezar!

Congratulations for completing this challenge! But I have a feedback, I see that you set the height on your body style to be 100vh. My recommendation is that use min-height instead of height, that way when the user screen height is not enough to see the full content, they can scroll to see the rest of the content.

That's it Cezar! Hopefully this feedback will be useful for you!

2
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Cezar Ganzon! 👋

Nice to see you complete another challenge! 😀 Good job on this one! 👏

I suggest adding a little margin/padding around the top and bottom of the card in the mobile layout so that there's always a little bit of space between it and the edges of the screen (even on screens with smaller heights).

Also, you could perhaps use a list element for the statistics at the bottom of the card (since they seem to be a group of items) to make your HTML a teeny bit more semantic. Just a thought! 😉

Keep coding (and happy coding, too)! 😁

1
P
Patrick 14,325

@palgramming

Posted

Looks good the only thing you could do is transition to the desktop width and height purple image in the mobile layout as soon as the screen gets big enough to accept that size image but your results look good..... Great Job 🌟🌟🌟🌟🌟

0

P

@cganzon

Posted

@palgramming I'll give that a try. Thanks for the tip!

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