Product card component

Community feedback

• 

  Gift Richard•520

  @fibonacci001Posted about 1 year ago

  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 😊

  0
• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  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;
    }
  }
  

  0