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 product card using CSS Flex

zHelga 50

@zHelga

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


How to improve the code?

Community feedback

@AbderrahmaneGuerinik

Posted

Hello 👋 You're doing well but you can improve this points :

  • The image is not showing for mobile devices and that's because you are defining the flex-basis of .card-img to 35%, that will not not work because pourcentage height works only if you give a fixed size to the parent element which is not the case here so you have to explicitly define the height of the parent (.card-box).
  • you should also change the font-weight of text to match more the design.

I hope this would help you 😃

Keep it up and enjoy coding

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