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

Product Preview Card

@Le-Yzzz

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Don't have any questions but all feedback is very much appreciated

Community feedback

Lucas 👾 104,420

@correlucas

Posted

Hello Yahir, congratulations for your solution!

The card component is perfect in the desktop version, but in the mobile one, the second column doesn't grow enought to keep all the text content. This is due some fixed height you've set in the desktopversion.

Look what isn't allowing the column grow in mobile:

.container {
max-height: 430px;}

Note that you don't need to set the height, the container automatically grow with the element paddings and margins.

To keep this challenge simple my advice is that you used display: grid; to build the component with two equal column, its much easier.

Hope it helps, and happy coding!

Marked as helpful

0

@Le-Yzzz

Posted

@correlucas thanks again 😅 looks like i have to learn grid next hehe

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