Submitted 2 months ago

Responsive product preview card

ephraimdjeket• 110

@ephraimdjeket

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

As I started to develop the card component, I ran into an issue of finding a way to change the desktop image to mobile. I learned a new HTML tag called that allows to change image depending on the window width size.

Community feedback

Mikhil Desai• 200

@mike15395

Posted 2 months ago

Hey @ephraimdjeket Congratulations on completing the challenge!

Your solution looks very perfect. Your code is also very clean and well maintained.

I just wanted to point out one small bug: While transitioning from 613px to less than 613px, the image of desktop appears for a while then again mobile image appears.(check responsiveness in dev tools chrome) I think this bug is because of using em, try using rem or px, it may fix your bug.

Keep growing! Happy Coding:)

Marked as helpful

ephraimdjeket• 110

@ephraimdjeket

Posted 2 months ago

Hi @mike15395! Thank you so much for the feedback! :) Yeah I thought I noticed something there, I'll get it fixed!

Please log in to post a comment

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