Product card preview component (Flexbox, Grid, CSS)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hello @mcddcm, congratulations for you solution!

  My advice for you in this challenge is to don't import this image with the css, in a real life project isn't a best practice to import the product photo with the CSS because this will make harder to make your image be found in the search engines, use this kind of a approach for backgrounds, since this is a product use img or picture inserting them in the html. A good practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  Hope this helps, happy coding

  Marked as helpful

  0

  ---

  

  mcddcm•40

  @mcddcmPosted about 2 years ago

  It will be a bit much to modify the codebase for this challenge. But I've made a note and will make sure I follow this approach in my future projects!

  Thanks for the excellent feedback @correlucas !

  1
• 

  Naleeka•470

  @NaleekaPosted about 2 years ago

  hello @mcddcm 👋

  You could use <h1> tag instead of <h3> tag and change it's font-size to fix the accessibility issue.

  Use media queries to make the component responsive

  @media screen and (min-width: 375px;){
     .product-card{
         width:30vw;
      }
  }
  

  hope this was helpfull

  happy coding 👋

  Marked as helpful

  0

  ---

  

  mcddcm•40

  @mcddcmPosted about 2 years ago

  Thanks @Naleeka - I'd definitely have added that media query if I'd followed @coreelucas 's recommendation!

  1