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

@itsleticia

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

P

@EugeneCarbado

Posted

Hi Leticia,

I've had a look at your code and I'd like to offer some tips. Firstly I can see that as I expand my window your content box expands also. This is due to using vw to set the size. It would be better for you to find out the size of the content box, or even what you think the size should be then use px or rem values (1rem is equal to 16px. Or you can set it to what you like in the root). Using vw or vh can be tricky because as the user's window increases so will your element. In some cases, this could be useful, but for something like a product card this is something that should, in most cases, have a fixed height / width.

You have used em values and this can be also tricky, as using em values will inherit the size of the div it is nested in. A better value to use is rem as it always refers to the value set in the root.

I hope this feedback is useful.

If you have any questions don't be afraid to reach out :)

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