Responsive Product Card Html Css Codepen -

.products-grid 
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
.product-card 
flex: 1 1 250px; /* Grow, Shrink, Basis */
max-width: 300px;
background: white;
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.2s;
text-align: center;

.product-card:hover 
transform: translateY(-5px);

img 
width: 100%;
height: auto;
border-radius: 8px;
 responsive product card html css codepen
@media (max-width: 768px) 
.product-card 
flex: 1 1 100%; /* Takes full width on mobile */

Why this works: The flex: 1 1 250px tells each card to try to be 250px wide, but if the container shrinks, they shrink proportionally. The media query forces full width below 768px.

We use semantic tags. article acts as the card container, figure handles the image, and section groups the text. img width: 100%; height: auto; border-radius: 8px;

<div class="product-container">
  <article class="product-card">
    <!-- The Image Area -->
    <figure class="product-image">
      <img src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Vintage Leather Bag on wooden table">
      <span class="product-badge">New</span>
    </figure>
<!-- The Content Area -->
<section class="product-details">
  <header>
    <h3 class="product-title">The Wanderer Rucksack</h3>
    <p class="product-subtitle">Handcrafted Vintage Leather</p>
  </header>
<p class="product-description">
    A durable and stylish companion for your weekend trips. Made with full-grain leather that ages beautifully over time.
  </p>
<footer class="product-footer">
    <div class="product-price">
      <span class="price-current">$189.00</span>
      <span class="price-original">$230.00</span>
    </div>
    <button class="add-to-cart">Add to Cart</button>
  </footer>
</section>

</article>
</div>

We want our HTML to be semantic and clean. We will use a wrapper <div> to hold everything together. Inside, we’ll separate the visual elements (the image) from the informational elements (text and price).

<div class="product-card">
  <div class="product-image">
    <img src="https://via.placeholder.com/300x400" alt="Product Name">
  </div>
  <div class="product-info">
    <span class="product-category">Footwear</span>
    <h2 class="product-title">Classic Leather Sneakers</h2>
    <p class="product-description">Premium quality leather with a rubber sole. Perfect for casual outings.</p>
    <div class="product-price">
      <span class="current-price">$89.99</span>
      <span class="original-price">$129.99</span>
    </div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

Why this structure?