Preview Card with grid and custom properties

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hello gmqrk247! To answer your question, yes, there is a better way to handle images than using background image. Firstly, background-image is really meant for images that are a background, and so there should be some text content in the container as the foreground. In this case, the image is the actual product, and it's not a background image at all, and so it should be in the HTML as an image, not a div.

  You can use a responsive image with either the picture element or img with srcset. It really depends on the browser and type of image as the img with srcset may not be compatible with some browsers.

  // if you used a desktop first approach:
  
  // 1. using img
  
  <img alt="Glass perfume bottle placed against a leafy background" 
      srcset="images/image-product-desktop.jpg 600w, images/image-product-mobile.jpg 686w"     
      sizes="(max-width: 50em) 686px, 600px" 
      src="images/image-product-desktop.jpg">
  
  // 2. using picture
  
  <picture>
      <source media="(max-width: 50em)" srcset="images/image-product-mobile.jpg" />
      <img src="image-product-desktop.jpg" alt="Glass perfume bottle placed against a leafy background" />
  </picture>
  
  

  Also, some other comments for you:

  I'm viewing this on a laptop, and in the mobile view, the top and bottom of the card is cut off. I tried to see what's going on in your code, but I'm a bit confused as I see two media queries of min-width: 50em and max-width: 50em, and so I don't know whether you started with a desktop-first approach, or a mobile first approach. If you started with a desktop-first approach, then whatever you have in the main code would be for the desktop, and you only need one media query, which would be for the mobile version. You don't need another media query just for the desktop; the same goes for the mobile-first approach. If you did start with a desktop-first approach, I strongly suggest that you try a mobile-first approach for the next challenge, or better yet, try this one again with a mobile-first approach and with the responsive image method I suggested above! Anyway, hope this helps you out a bit 🙂

  1

  ---

  

  gmqrk247•90

  @gmqrk247Posted about 2 years ago

  @elaineleung Thank you for your feedback! I was not familiar with img/picture tag used this way, at all. I have always used img with simply adding a source and alt. I will look into these methods!

  1