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

A simple responsive product preview card

@NemanjaChido

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


Feedback welcome

Community feedback

@HunigoleSan

Posted

Hello @NemanjaChido! 🎉 Congratulations on your work! You've done a good job so far, but let me offer you some tips for improvement. There's a lot you can enhance, but let's address something crucial first.

In CSS, resizing images using percentages can sometimes result in a messy code and poor visual appearance. I noticed that you're resizing your image

using background-size: 100% 100%;. While this is suitable if your container has a fixed width, it might cause issues when the container's size changes dynamically.

For your ".wrapper" class, you're using embedded measurements or "percentages," causing the image to resize in an undesirable way. Instead

I recommend using background-size: cover;.

This property ensures that the image adapts to its entire container, maintaining its aspect ratio even when the container's size changes.

Keep up the good work! 💪🚀

0

@NemanjaChido

Posted

Hello @HunigoleSan I've always struggled with this, so I really find your feedback! quite helpful. Thank you!

1

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