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 preview card component

BreinerJT 530

@BreinerJT

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 struggled with the responsive design but finally did it, any feedback is welcome!

Community feedback

@pradeeps4ini

Posted

Hey, well done on completing the project.

In your parent element with class ".card", you have put the height as 80vh. Because of it, the height of the card is changing and the image and content are not aligned properly. You don't have to use a height here. Your card will be high as much content it needs. But if you still want to use a height. Use the "min-height: auto", this way your card will grow only as much content is there.

You have set the image height to be 100%. And when the parent card height is 80vh, it is making the image grow more than the left side. I would suggest that after changing the card height to min-height: auto. You also change the image "height" to "min-height". Then the image will grow to the parent card's height.

You don't have to push "node_modules" directory to github. If someone wants to know the libraries you're using in your project. Then he/she can get that info from the package.json file. You can use a git.ignore file to ignore the node_modules directory.

Marked as helpful

0

BreinerJT 530

@BreinerJT

Posted

Thanks @pradeeps4ini, this is actually very helpful since working with images is very hard for me, already did the changes and looks better now, thank you so much.

0
BreinerJT 530

@BreinerJT

Posted

There is a bug that only happens when I deploy the site but in my local server it's good, if you know why this happens please let me know, I would really appreciate it.

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