Product Preview Component Card

Community feedback

• 

  João Vitor•640

  @jvssvjPosted 6 days ago

  Hi Taylor, your solution was very good 👏. Regarding your question, yes, there are some ways to change the images, I will show you some examples:

  1. Using Media Queries. If the image is a background, you can set different images with background-image inside media queries:

  .element {
    background-image: url("image-desktop.jpg");
  }
  
  @media (max-width: 768px) {
    .element {
      background-image: url("image-mobile.jpg");
    }
  }
  

  2. Using picture and source (for <img>). If it's an image in the HTML, you can use the <picture> tag with <source> to dynamically swap out the image:

  <picture>
    <source srcset="image-mobile.jpg" media="(max-width: 768px)">
    <source srcset="image-tablet.jpg" media="(max-width: 1024px)">
    <img src="image-desktop.jpg" alt="Image description">
  </picture>
  

  3. Using srcset in <img>. Another approach to responsive images is to use srcset on the <img>:

  <img src="image-default.jpg" 
       srcset="image-mobile.jpg 768w, image-tablet.jpg 1024w, image-desktop.jpg 1920w" 
       sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 800px"
       alt="Image description">
  

  These are just examples, you can change as you need, good luck friend.✌

  Marked as helpful

  1
• 

  P

  milicaaa175•130

  @milicaaa175Posted 6 days ago

  Congrats on finishing the challenge, I think you did really good! There are only two things in your solution that are different from the design picture, but I think they are a quick fix:

  • More padding is needed around the text portion of the card
  • Color of the title is not right

  Good luck on your next project!

  Marked as helpful

  0