Product card component

Hi there 👋

Great job on this coding challenge! Your product preview card is looking good overall. Below are some suggestions that can help refine it further.

HTML 🏷️ Use <button> for "Add to Cart" instead of <div> for accessibility Wrap all content in a <main> element CSS 🎨 Apply box-sizing: border-box so padding doesn't affect width/height Favor classes over IDs for styling elements Avoid fixed heights so it adapts to different screens Use rem/em units rather than vw for font-size consistency Make columns equal width with width: 50% Image Issue 🖼️ You asked about the image being buggy - a couple things to check:

Make sure the image file path is correct Double check the background-size property is set correctly Use a responsive max-width: 100% on the image container Example Code 💻

html



<main>

  <!-- card content -->  

  <button class="add-cart">Add to Cart 🛒</button>

</main>

css

Copy code

.add-cart {
  cursor: pointer;
}

.col {
  width: 50%;
}

Let me know if this helps address your question about the image!.Just Keep up the great coding!, 🚀 practice makes perfect 😊

Nice well done. As for you problem you can fix it like this

@media (max-width: 600px) {
  .container {
    max-width: 95vw;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
  }
  .illustration {
    background: url("./images/image-product-mobile.jpg");
    background-repeat: no-repeat; /* add this line */
    border-radius: 1rem 1rem 0 0;
  }
}