Skip to content
Submitted 5 months ago

Responsive product preview card

ephraimdjeket•130
@ephraimdjeket
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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
    @mike15395Posted 5 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
    0
    ephraimdjeket•130
    @ephraimdjeketPosted 5 months ago

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

    0

Please log in to post a comment

Log in with GitHub

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