Skip to content
Submitted 2 months ago

Responsive Product Card with Flexbox

P
j3dd3rs•90
@j3dd3rs
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

That I managed to figure out a few problems by myself by searching around. I also managed to come back to it the following day a bit more rested to finalise the last bit on the image overlay I think needed adding, or at least made it look better.

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

Getting the image to properly display with an overlay. I googled around and found some solutions. Also on how to display two types of images. I couldn't find the best responsive way for only loading the one image, instead settling for classes to sort it.

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

Is there a way to make the image responsive part better?

Code

Please log in to post a comment

Log in

Community feedback

  • Muskan Fatima•160
    @muskan-fatim

    Hi there! 👋 First off — your card design looks awesome! Super clean and nicely styled — great work on sticking with it and solving issues one by one. That’s the best way to grow as a developer 💪

    About your question on the image responsiveness — I totally understand what you were aiming for, and you did a great job figuring it out with classes. One idea that might help simplify things and make it more responsive is to apply your image styling on the container that holds the image, instead of the image itself.

    Another approach that could really help here is using the <picture> element. It lets you load different images for different screen sizes, like this:

    <picture>
  <source media="(min-width: 600px)" srcset="image-desktop.jpg">
  <img src="image-mobile.jpg" alt="Product image">
</picture>

    This way, the browser automatically chooses the best image to load based on screen size — no extra CSS classes needed! Plus, it helps with performance, since it avoids loading both images.

    Also, make sure your image (or its container) has styles like:

    width: 100%;
height: auto;
object-fit: cover;

    That way, the image scales nicely inside flexible containers.

    You should feel really proud that you pushed through and solved it with your own research — that’s huge! Keep experimenting and building. You’re clearly on the right path. 🚀

    Marked as helpful
  • Bhavik Thakur•320
    @bhavikthakur

    Great job! Your code looks nice, I'd suggest you to try the source tag and define width and change the image as per the viewport of the user's device.

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