Skip to content
Submitted 6 months ago

Product-preview-card-component

QuentinPetton•200
@QuentinPetton
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

Community feedback

  • Martín Beltrán•260
    @JMBeltranDevPosted 6 months ago

    Very good solution, you just need to load the image according to the size of the screen.

    0
    QuentinPetton•200
    @QuentinPettonPosted 6 months ago

    Hello@JMBeltranDev you talk about phone view ? There's a mediaqueries for this one

    0
    Martín Beltrán•260
    @JMBeltranDevPosted 6 months ago

    In the instructions of the challenge it is requested that the design be optimal according to the screen size and in the files they provide you with 2 photos, one for mobile and one for desktop, the desktop has more definition. Then one or another image must be loaded according to the screen size so that performance is optimal. It is achieved with the following code: <picture class="product__img"> <source media="(min-width:600px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt="perfume imagen"> </picture>

    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