Skip to content
Submitted over 1 year ago

Perfume Preview Card- HTML, CSS and Responsive

Jody Depp•30
@JoDepp
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

I really struggled with using two different images for the responsive aspect of this page. It's still not acceptable, but after trying a few different ways, I can't get it to look exactly like the example. What is the easiest way to set up different images to use for different size screens? Thank you for any advice!!

Community feedback

  • Arkell Kenney•280
    @adkenneyPosted over 1 year ago

    Hi there, congratulations on completing the challenge!

    For dealing with an image that changes depending on screen size you can use the <picture> element. You can read more about it Here

    For example:

    <picture>
    <source media="(min-width:768px)" srcset="/images/desktop.jpg"/>
    <img src="/images/mobile.jpg" alt="">
</picture>
    Marked as helpful
    1
    Jody Depp•30
    @JoDeppPosted over 1 year ago

    @adkenney thank you for the advice.

    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