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 - Flexbox, overlay

John 410

@MiyaoCat

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


Between this challenge and the NFT preview card I'm getting better and creating overlays on images.

Community feedback

@Bishalsnghd07

Posted

Hi @MiyaoCat👋

Congrats for completing this challenge🎉 and great work👏

1)There is an very useful browser extension called Perfect Pixel that allow you compare with the design image with your end product and it gives the exact dimensions to make your web page pixel perfect. I recommend to use this to make your web page pixel perfect.

2)Add min-height instead of height, I did not see it, what happens when you did not give min-height in your body, your layout size will be work as your given height to your components, like if you give your component size lesser than your browser screen size, than your component will not take the entire height of your screen. That's why it is always recommend to use min-height so by doing that your layout will not breaking and will take entire size of your screen. Also, It is best practice to use.

Other than that good job!

Hope this suggestion will help you.

Happy Coding❤️

Marked as helpful

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