Skip to content
Submitted over 1 year ago

Parfume_BeytullahArikan

arikanb•20
@arikanb
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

###I found difficult to change the image for responsive design. How can I change the image without JavaScript, with only css?

Code

Please log in to post a comment

Log in

Community feedback

  • Lartzmanuel•190
    @Lartzmanuel

    You can use media queries like this:

    @media-query only screen and (min-width: 700px){
.image-container {
    content: url(/assets/images/etc);
    Object-fit: cover;
  }
}

    Note that I just used 700px as my break point for example sake. You can adjust the break point to your liking.

    I hope this helps👍

  • P
    Cesar Valencia•350
    @cvalencia1991

    use media queries

  • P
    Daniel 🛸•44,790
    @danielmrz-dev

    Hello @arikanb

    You can do it using flexbox and media queries. It's not that hard to do it.

    Hope it helps!

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