Responsive Product Card Html Css Codepen ((link)) -

<!-- CARD 5 - casual hoodie --> <div class="product-card"> <div class="card-img"> <img src="https://cdn-icons-png.flaticon.com/512/2523/2523864.png" alt="hoodie" loading="lazy"> </div> <div class="card-content"> <div class="product-category">clothing</div> <h3 class="product-title">Cozy Fleece Hoodie</h3> <p class="product-description">Recycled cotton blend, relaxed fit, kangaroo pocket, premium organic dye.</p> <div class="price-rating"> <div class="price">$49 <small>USD</small></div> <div class="rating"> <span class="stars">★★★★☆</span> <span class="rating-value">4.6</span> </div> </div> <button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button> </div> </div>

/* optional micro-interaction for button feedback (just demo) */ .btn-card i font-style: normal; font-size: 1.1rem; responsive product card html css codepen

Look at the @media (min-width: 600px) block. This is the plot twist in our story. Once the screen is wider than 600 pixels, we switch the flex-direction to row . The image snaps to the left, and the text snaps to the right. The image gets a width of 45%, and the text gets 55%. This is the "Responsive" magic. The image snaps to the left, and the text snaps to the right