Responsive Product Card Html Css Codepen 🎯 Newest

If you are building an e-commerce site, a portfolio, or just practicing your layout skills, the product card is the bread and butter of web design. It’s where design meets functionality. A bad card layout can ruin a shopping experience, while a smooth, responsive one can drive conversions.

Today, we are going to build a modern, responsive product card using only HTML and CSS. No JavaScript required for the layout!

Here is what we are aiming for: a card that looks great on mobile, adapts to larger screens, and includes hover effects to make it feel interactive.

CSS Grid is superior for product galleries because it handles alignment in two dimensions (rows AND columns). This is the industry standard for "responsive product card html css codepen" results.

We use CSS Grid and Flexbox. Notice how we switch layouts using a media query without writing duplicate code.

/* --- Global Reset & Setup --- */
* 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
body 
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;

/* --- The Container (Just for demo centering) --- /
.product-container 
width: 100%;
max-width: 800px; / Limits width on huge screens */

/* --- The Card Logic --- /
.product-card 
background: white;
border-radius: 12px;
overflow: hidden; / Keeps image inside the rounded corners */
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
/* MOBILE DEFAULT: Column Layout */
display: flex;
flex-direction: column;
/* Smooth transition for hover effects */
transition: transform 0.3s ease, box-shadow 0.3s ease;
 responsive product card html css codepen
/* Hover Interaction for Desktop */
.product-card:hover 
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);

/* --- Image Section --- /
.product-image 
position: relative;
flex-shrink: 0;
height: 250px; / Fixed height for mobile */
overflow: hidden;

.product-image img 
width: 100%;
height: 100%;
object-fit: cover; /* Prevents image distortion */
transition: transform 0.5s ease;

.product-card:hover .product-image img 
transform: scale(1.05); /* Subtle zoom on hover */

.product-badge 
position: absolute;
top: 15px;
left: 15px;
background: #e74c3c;
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;

/* --- Details Section --- /
.product-details 
padding: 25px;
display: flex;
flex-direction: column;
gap: 15px;
flex-grow: 1; / Ensures content fills available space */

.product-title 
font-size: 1.5rem;
color: #2c3e50;
font-weight: 700;

.product-subtitle 
color: #7f8c8d;
font-size: 0.9rem;
margin-top: -10px;

.product-description 
color: #555;
line-height: 1.6;
font-size: 0.95rem;
 If you are building an e-commerce site, a
/* --- Footer & Price --- /
.product-footer 
margin-top: auto; / Pushes footer to the bottom */
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #eee;
padding-top: 20px;

.price-current 
font-size: 1.25rem;
font-weight: 700;
color: #27ae60;

.price-original 
font-size: 0.9rem;
color: #95a5a6;
text-decoration: line-through;
margin-left: 10px;

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

.add-to-cart:hover 
background-color: #34495e;

/* --- RESPONSIVE BREAKPOINT (Tablet/Desktop) --- /
@media (min-width: 600px) 
.product-card 
/ Switch to side-by-side layout /
flex-direction: row;
max-width: 700px; / Prevent card from getting too wide */

.product-image 
/* Image takes up 45% of the width /
width: 45%;
height: auto; / Height is now determined by content side */

.product-details 
/* Content takes remaining space */
width: 55%;
padding: 30px;

You can copy and paste this directly into the HTML and CSS panels on CodePen.

Now for the magic. We need to style the card to handle different screen sizes.

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

@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.