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

kmnkatโ€ข 30

@kmnkat

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


I'm still struggling with responsiveness. Is it done well? What can I improve?

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello Kmnkat, congratulations for your solution!

Your solution seems pretty great and is really flexible/responsive.

I saw that you've used overflow: hidden and was a good choice, but note that in the mobile version when the screen scales down, some text info starts to get cropped due this overflow property.

You need also to work a bit the padding between the text elements, you can manage all these text elements + button, using a single property inside the container row-gap and you can set a value around 24px to space all the elements together.

Hope it helps 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