Responsive Product Card

Hi @ParthUON. Awesome Project 👏

About your question, I was impressed by the use of the content property, I always thought it was only used in pseudo-elements. But the answer here would be to use the picture element,

This is an example

<picture>
    <source srcset="...desktop.jpg" media="(min-width: 40rem)">
    <img src="...mobile.jpg" alt="">
</picture>

picture {
    display: contents;
}

picture img {
    width: xrem;
    // more
}

What happens is that the browser switches out the src of the image when it hits a specified media query

A caveat though is that the content that is shown is only the image tag, so I would suggest, putting any styles on the image tag

You can learn more about the picture tag on the MDN docs

And btw what do you need parallax for?

Happy Coding, Ayobami

Hello @ParthUON!

Your project looks great!

I have a suggestion about your code that might interest you:

📌 You can use the <picture> tag when you have different versions of the same image.

Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

Example:

<picture>
    <source media="(max-width: 460px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

I hope this helps!

Other than that, excellent work!