All comments

• 

  mohamed magdy•110

  @mohamed-magdy26

  Submitted over 2 years ago

  

  Product preview card component using only html and css

  2

  30
  

  Jethier•390

  @jCasia

  Posted over 2 years ago

  Hello! First of all, congratz on completing the challenge!!😀

  I was just looking at your code and wanted to help fix the responsiveness

  @media (max-width: 687px) { 
  
  .preview-card {
   grid-template-columns: 1fr;
   grid-template-rows: repeat(2, 1fr);  <--"Add this to specify how many rows you want in your grid,  your image does not know where to go, this should solve the problem"
   max-height: 40rem;  <--"add this so your card container won't get bigger than 40rem(640px)"
   margin: 0 2rem;  <-- "put a margin right and left to make it look neater"
    }
  
  .preview-card .img {
   min-height: 360px;  <--"remove this as this will restrict the height to 360px and the image will not go any smaller, so this limits the image to resize in smaller widths"
   border-radius: 10px 10px 0 0;
   background-image: url(/images/image-product-mobile.jpg);
  
  **when creating a grid, its good to specify which cells each element/div should be in the grid for example**
  
   grid-row:1/2;
   grid-column:1/2;
    }
  }
  

  I'm sorry if its a bit messy, but I hope I helped you out even its just a little bit

  0

  Marked as helpful