Css Codepen: Responsive Product Card Html

@media (max-width: 480px) { .product-card { flex-direction: column; } .product-image { width: 100%; height: 200px; } .product-info { text-align: center; } }

button { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; } responsive product card html css codepen

.product-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px 10px 0 0; } @media (max-width: 480px) {

.product-info { text-align: center; }