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 responsive

@fayiz770

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?

This was one of the most easy challenge that I solve but I really enjoy it.

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

This challenge was very simple I didn't encounter with any challenge, but I love it.

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

i

Community feedback

P
mantis 240

@morauszkia

Posted

Hello! I liked your solution, and the change between the horizontal and vertical arrangement works really well. I only have a couple of ideas to consider to improve upon your solution.

I liked the two different fonts used in the design. You might consider adding the other font for the title and the current price, which would make these stand out. Also, you are missing the hover/focus state for the button.

Finally, on really small screens the cards edges overflow. You might consider adding some constraint so that there always remains some space around the card, e.g. with max-width or using clamp() or min() for the width.

And for the border-radius, you can do it simpler, if you add the border radius to the card, and then specify overflow: hidden, which would hide the overflowing corners of the image, without needing to add the border radius there as well. So later, if you would decide to use some other border-radius, you wouldn't have to worry about changing it everywhere, and also you would't need to specify four separate values for the four corners.

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