Somewhat responsive page using css grid

Good job on your project!

Since this a product card, it really isn't meant to continuously expand like like full website; it should have two fixed designs... mobile and desktop.

To fixed how you card looks in mobile view, change the width size in your wrapper class to 375px

Next, change the min-width of your media to 610px and add a max-width of 600px to your wrapper class (in the media section).

With those changes your card should look the way you want it to.

Happy Coding!

Hey Alexandru, good work on the challenge, I think how you tackle the image using background-image with grid works well quite! But as you've pointed out the image for mobile zooms and that's because of the CSS property background-size: cover and the also the way grid cells behave where all cells have the same dimensions according to the large cell.

If you want to look back into the picture solution again have a look at my take on this. https://bitbucket.org/warrenlee/frontend-mentor/src/7d9890d17383b78420d658897ccfe816ee62f71a/product-preview-card-component/index.html#lines-14:17 Just make sure you use media="min-width: XXpx" rather than max-width in the source tag and make the source cascade so that large min-width starts from the top.

Hope that helps!