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

Customer friendly 3-column card component using simple HTML and CSS

@adityas-github

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm delighted to have successfully wrapped up this project, utilizing all the knowledge I've acquired to tackle and complete this challenge. Your feedback and comments would be immensely valuable in aiding my growth. Thank you 😊

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @adityas-github!

Your project looks very good!

I have a few suggestions for you to improve it:

  • You don't need to worry about setting height to the card. You can just add the elements and the card will adapt it's size to fit the content. If you set a specific height and the elements inside need more space than what you specified, the content will leak from the card. This is currently happening to your project.

  • Instead of setting width with a percentage value, you can set a max-width with a fixed value, so your card will stop growing when it reaches the max-width you specified. Right now your card is growing indefinitely as the screen size increases. By setting max-width, you prevent it from overgrowing.

I hope it helps!

Other than those details, you did an excelent job!

1

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