Product preview card using CSS Flex

Hi!

To use or display images based on breakpoints you can use <picture> element.

Here's some explanation of the element:

<picture>
<source srcset="image-large.jpg" media="(min-width: 1200px)">
<source srcset="image-medium.jpg" media="(min-width: 900px)">
<img src="image-small.jpg" alt="">
</picture>

• Here in the above code snippet inside the <picture> element im using 2 <source> elements .
• Each of these <source> element specifies a different image using the srcset attribute. (basically setting the img URLs to use for breakpoints)
• The media attribute is used to set the conditions for when these <source> should be used i.e min-width:900px and min-width:1200px.These are like same media queries you use in css but its an attribute here. just like in css if you want to change the bg-color to red when the the screen is above 768x using media query, here it changes the images
• In the example initially, if the device is on a small-screen, the <img> tag will be used, showing the small image.
• As the device width increases and reaches 900px mark , the "image-medium.jpg" will be displayed.
• Further increasing the width and hitting the 1200px mark will switch to showing "image-large.jpg".

Here's how you can implement it in your project:

• In your .card-img div add:

<picture> 
<source srcset="images/image-product-desktop.jpg" media="(min-width: 780px)" >
<img src="images/image-product-mobile.jpg" alt="Perfume Image" >
</picture>

and after adding this you can remove the other 2 images and that's it!

Using <picture> is great if you want the images to switch based on screen sizes so its great for responsiveness!

Good luck and Happy coding!🕺🏻

When you need to change image depending on the size of the screen you should use picture html element. Here is helpful article on mdn: The picture element

Hey,

Feel free to add a space between the icon and the button text. It'll look much nicer.

Have fun!