/* Tablet: 2 columns */ @media (min-width: 640px) .products-grid grid-template-columns: repeat(2, 1fr);
/* Desktop View */ @media (min-width: 1000px) .shop-container grid-template-columns: repeat(4, 1fr); /* 4 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; responsive product card html css codepen
.product-card:hover .product-image img transform: scale(1.05);
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. /* Tablet: 2 columns */ @media (min-width: 640px)
.add-to-cart background-color: #2c3e50; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background-color 0.2s;
Start by defining a clear structure in the using semantic tags for better accessibility. The image snaps to the left, and the text snaps to the right
<p class="product-description"> A durable and stylish companion for your weekend trips. Made with full-grain leather that ages beautifully over time. </p>
/* small responsive touches */ @media (max-width: 640px) body padding: 1rem;
.product-title font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.35; margin-bottom: 0.5rem; color: #0f1e2e; transition: color 0.2s;