responsive product card created using css +html

Thank you for your feedback, I appreciate it 🙂 🙂

For the desktop layout, I set the grid columns property in the media queries section, not the main one and it works fine with me so kindly wait for a couple of minutes then refresh the page.

Concerning the pixels(px) I am not sure if you mean that I used pixels in the font-size property because I used (em) and (vw) for this one. and for the articles thank you very much I will read them of course; 🙂 @daniel-barda

@naglorias

You should define grid-template-columns in .product-box-grid, not only in media query.

This is because media queries are conditions that define how the CSS code will behave according to the screen size.

Therefore, setting the grid column values ​​in a media query will only be valid for a certain screen size.

Instead, you need to set the grid-template-columns property in the class Selector ("main"), which, in our case, is .product-box-grid.

This will make them valid for any screen size, and then we'll use a media query to adapt our layout to different screens.

Now I will answer the second part.

You did use rem.

But note that in class .product-box-grid you used

max-width: 860px;
height: 580px;

For values ​​of this type I would recommend using rem.

Of course, small things like border-radius: 9px or letter-spacing: 5px; It is fine using px because it is a small value.

I hope it is now makes more sense to you.

In addition, I recommend reading the article I attached to you earlier, the trick of 62.5% font size.

I'm sure it will help you a lot in the future.

Oh yes, I get your point and everything make sense now and thank you for the articles and for your help @daniel-barda