Reponsive product previwe card using CSS Grid

Community feedback

• 

  Brian Schooler•440

  @superschoolerPosted over 2 years ago

  Hi Gabriel,

  I noticed on larger screens there's a large gap between the image and text since you have a fixed height on your image. Something you might do to combat this is use the following css:

  .product-img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  }
  

  Even with this, the product doesn't look great on all screen sizes. The easiest solution to this would be to add a max-width to main so it will remain static at the largest visually appealing size. If you wanted to get more advanced, you could use a clamp to grow the text with the screen, but I don't think that's necessary with this project.

  Additionally, I'd add a max-width on your mobile product as well around ~425px. Any larger than that and the image dominates until the media break.

  Hope this helps!

  1

  ---

  

  Gabriel Ruiz Varela•50

  @GabrielRuizVarelaPosted over 2 years ago

  @superschooler Thanks for your feedback, I completely forgot to check on bigger screens. I implemented your fix with a min-width on desktop and a max-width on mobile, and that seems to fix it.

  Cheers.

  1