All comments

• 

  mohamed magdy•110

  @mohamed-magdy26Submitted over 1 year ago

  well, I'm feeling that the image part is not best practice is there anyway I can use img tag for image while changing the "src" attribute for different query ? I had to use background image for this to handle but I had a problem that the div has no height when I made the responsive design so I had to give it min-height to image height? also when I used the img tag when I increase gap between elements the component height increase but the image height did not which made a white area under the image

  

  Product preview card component using only html and css

  2

  30
  

  Jethier•390

  @jCasiaPosted over 1 year 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

  Marked as helpful

  0