Responsive Product Card Html Css Codepen

For a responsive card, the image is usually the tricky part. We want to ensure it doesn't distort.

.product-image 
  position: relative;
  height: 250px;
  overflow: hidden;
.product-image img 
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops image nicely to fill the container */
  transition: transform 0.5s ease;
/* Zoom effect on hover */
.product-card:hover .product-image img 
  transform: scale(1.05);

Now for the magic. We need to style the card to handle different screen sizes. responsive product card html css codepen

Sometimes, on ultra-wide screens or mobile viewports, a horizontal scroll on row is more UX-friendly for related products. For a responsive card, the image is usually the tricky part

.horizontal-scroll 
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  scroll-snap-type: x mandatory;
  padding: 1rem;
.horizontal-scroll .card 
flex: 0 0 280px; /* Fixed width for scroll */
scroll-snap-align: start;
 Now for the magic
/* Hide scrollbar for cleaner look (Webkit) */
.horizontal-scroll::-webkit-scrollbar 
display: none;