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
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 wil appreciate your comments

Community feedback

Ken Zimnyโ€ข 200

@K-Zimny

Posted

You should remove the fixed height you have on the .card_styles classes. This can be an issue if the content becomes longer, as it will cause a text overflow.

Instead, remove the height and apply align-items to the .wrapper_container.

This will create a dynamic box no matter how the content gets updated (future proofing)

Marked as helpful

0
Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello @Kishp73, Congratulations on completing this challenge!

Great code and great solution! Iโ€™ve few suggestions for you that you can consider adding to your code:

You made your html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use <article> instead of the <div>.

Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.

To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem here's the link โ†’ https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

โœŒ๏ธ I hope this helps you and happy coding!

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