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 Review Card

P

@JlordS32

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


Feebacks are appreciated!

Community feedback

SutonToch 340

@SutonToch

Posted

Congrats on completing the challenge!

I really like your button, and how it pops out a little when you hover over it. Very nice.

I think your mobile-design needs a little work, because the .img-container doesn't look right yet. It is probably because the height of your .img-container is static while the width is dynamic. Maybe try something like: min-height: 40%.

Also, switching to mobile with a 768px breakpoint is a little earlier for such a small component. Maybe everything below 600px is fine.

Other than that, I've never seen font-size: clamp(2rem, 4vw, 3rem); before. Fascinating, and definitely something I'm going to read up on now. Thank you!

You did a great job. Be proud of yourself and keep on going! :)

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