Product preview card component using only html and css

Community feedback

• 

  Steven Croft•170

  @scroft001Posted over 1 year ago

  • You can use the <picture> tag when you have different versions of the same image. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance.

     <picture>
        <source media="(max-width: 460px)" srcSet={mobileImage} />
        <img src={desktopImage} alt="{your alt text goes here}" />
      </picture>
  

  Marked as helpful

  1
• 

  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