Somewhat responsive page using css grid

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted over 2 years ago

  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!

  Marked as helpful

  1

  ---

  

  P

  Alexandru Stefan Gherhes•580

  @AlexandruStefanGherhesPosted over 2 years ago

  @vcarames Reading your comment it actually makes sense having the mobile set a max 375px. Thank you for your advice.

  0
• 

  Warren•630

  @warrenleePosted over 2 years ago

  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!

  Marked as helpful

  1

  ---

  

  P

  Alexandru Stefan Gherhes•580

  @AlexandruStefanGherhesPosted over 2 years ago

  @warrenlee Thank you for the insight regarding the picture element, following your example mine works as it should.

  1