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

korosu 60

@korosu

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

@slangley

Posted

I like what you've done here. It looks good!

A couple things. I'd suggest trying to do layouts like this with as little hard coding of sizes as possible. Using relative sizing where possible helps make the implementation more future proof for different sizes of screens.

A good example of this is your smaller breakpoints. With relative sizing, it would be easier to get the design looking good when you are at 320px wide (try using Chrome Devtools in responsive mode) to look at the widths as you drag back and forth.

A couple tiny nitpicky things, the font on the large price doesn't match with the bold heading. And when on small screens, there is still a large border on left and right which compresses the content alot.

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