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

@hmousavin

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


What are you most proud of, and what would you do differently next time?

I did RWD but, none of them gone smooth and confident as the one ! I think I have some progress in this manner.

What challenges did you encounter, and how did you overcome them?

  1. to fill the container with image, while preserving it's aspect-ratio (I was styling the wrong element ! :)
  2. add some padding while preventing the original width and height (solved by: box-sizing: border-box)

What specific areas of your project would you like help with?

Nothing actually .. I need more practice to increase my accuracy and attention-to-details.

Community feedback

Ralph 190

@RalphPastel972

Posted

Hi,

Really well done! Congrats. I struggled quite a fair bit with this challenge, so I have few advice to give, but I can point out some issues you might want to look at:

Your choice of breaking points lead to some visibility issues: From 376px wide to 480px wide, the desktop vision cut the old price out.

Good luck Hamid

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