Skip to content
Submitted over 1 year ago

Product Preview Component - Media Queries for Desktop & Mobile

Esther Rose•150
@codarose
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

Is there a better way to get the image to scale in the desktop view than using "object-fit: cover" ?

Is there a way other than media queries to use two separate images for desktop and mobile?

Community feedback

  • Manish Patel•730
    @savvystriderPosted over 1 year ago
    • You can use background-size: cover to display the image as a background image and then use the cover property to scale it.
    • You can add max-width: 100% to all images to make sure that images don't get any larger than they are supposed to be.
    • You can also use the transform: scale property to scale the image.
    • Also, you can use the HTML picture element "to offer alternative versions of an image for different display/device scenarios."

    Hope this helps! I think your project came out well, regardless.

    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