/* body */ .product-bodypadding:16px .product-title margin:0 0 6px; font-size:1.05rem; line-height:1.2; color:#111827;
The keyword suggests that many developers search for ready-to-edit examples on CodePen. So let me explain how to turn our code into a shareable CodePen demo.
Using object-fit: cover prevents product imagery from stretching or distorting across various viewport form factors. Use code with caution. Typography and Context Blocks Use code with caution. Card Footer and Call to Action (CTA) Use code with caution. 4. Fine-Tuning Responsiveness with Media Queries
.product-info span font-size: 18px; font-weight: bold; margin-bottom: 20px; responsive product card html css codepen
<!-- CARD 6 - Sunglasses (summer) --> <div class="product-card"> <div class="card-img"> <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=500&auto=format" alt="Polarized sunglasses" loading="lazy"> <div class="discount-badge">-30%</div> <div class="fav-icon" aria-label="Add to wishlist"><i class="far fa-heart"></i></div> </div> <div class="card-content"> <div class="product-category">Eyewear</div> <h3 class="product-title">Aviator Polarized</h3> <div class="rating"> <div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div> <span class="review-count">(103 reviews)</span> </div> <div class="price-wrapper"> <span class="current-price">$49.99</span> <span class="old-price">$69.99</span> <span class="installments">UV400 protection</span> </div> <button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to cart</button> </div> </div> </div>
.buy-btn background: #2c7da0; color: white; border: none; padding: 0.7rem 1rem; border-radius: 40px; font-weight: 600; cursor: pointer; transition: background 0.3s;
</style> </head> <body> <div class="container"> <h1>🛍️ Best Sellers</h1> <div class="product-grid"> <!-- Card 1 --> <div class="product-card"> <img class="product-image" src="https://picsum.photos/id/26/400/300" alt="Camera" loading="lazy"> <div class="product-info"> <div class="product-title">Vintage Camera</div> <div class="product-description">Capture memories with 35mm film aesthetic.</div> <div class="price-row"> <span class="current-price">$149</span> <button class="btn">Buy Now</button> </div> </div> </div> <!-- Add 5 more similar cards for demo --> </div> </div> </body> </html> /* body */
<div class="products-grid"> <div class="product-card"> <img src="https://via.placeholder.com/300x200" alt="Product"> <h3>Classic White Sneakers</h3> <p class="price">$49.99</p> <button>Add to Cart</button> </div> <!-- Repeat cards --> </div>
Now, the best way to learn is to see the code in action and tweak it yourself. I’ve prepared a fully interactive demo that includes all the above code, plus a few additional product variations. You can resize the preview window to see how the cards automatically reflow from 1 to 2 to 3 columns.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Product Cards</title> <style> * margin: 0; padding: 0; box-sizing: border-box; Use code with caution
.product-card:hover .product-image img transform: scale(1.05);
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
Usage notes:
Creating a responsive product card doesn't require heavy frameworks. By utilizing object-fit: cover for images and max-width for containers, you can create fluid components that look great on any device.
<div class="products-grid"> <article class="product-card"> <div class="product-image"> <img src="https://via.placeholder.com/400x300?text=Product+1" alt="Modern Headphones"> </div> <div class="product-info"> <h3 class="product-title">Wireless Noise Cancelling Headphones</h3> <p class="product-description">Over-ear design with 30h battery life and deep bass.</p> <div class="product-price"> <span class="old-price">$199.99</span> <span class="current-price">$129.99</span> </div> <button class="add-to-cart">Add to Cart</button> </div> </article>