Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product-preview-card-component

P

@QuentinPetton

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@JMBeltranDev

Posted

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

0

P

@QuentinPetton

Posted

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

0
P

@JMBeltranDev

Posted

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
Discord logo

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