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

P
kayan 630

@kayan2004

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@adewalemudasiru

Posted

You did great with your solution. The mobile version doesn't seem to have any issues, the desktop version however needed some more attention. Here's what I noticed.

  • The image border-radius doesn't match that of the design.
  • The image does not take the entire space (height).
  • The padding on the product details column isn't the best.
  • Your HTML code is not properly formatted either.

You should pay more attention to details and try to improve on writing better codes.

1

P
kayan 630

@kayan2004

Posted

most of the issues that are due to the fact that the exact sizes are not given and wasting so much time trying to get them right isn't the best idea. I appreciate your feedback though.

1

@adewalemudasiru

Posted

What I do is import the image into figma and use the rectangle shape tool to try and get the closest size. If you're on the pro plan, you can easily get the sizes with the figma file. @kayan2004

1

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