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

@Aniket200-ind

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 found it difficult to make the component responsive, would love some tips for this senario.

Community feedback

Mukwende 1,370

@mukwende2000

Posted

Instead of hiding images in the css for different screen, use the picture tag, you can look it up, it allows you to display different images for different screen. As regards reponisveness, wrap the picture tag(if you decide to use it) in a div so that its width is determined by the width of the container and give it a max-width of 100% so that it will not grow beyond its container. Give the both flex items a flex-basis of 100% to make them equal.

Marked as helpful

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