Update index.html

index.html

@@ -121,7 +121,8 @@
 
 .product-container {
     display: flex;
-    justify-content: space-around;
+    flex-wrap: wrap;
+    justify-content: center;
     padding: 20px;
 }
 
@@ -130,6 +131,8 @@
     padding: 20px;
     text-align: center;
     max-width: 300px;
+    margin: 10px;
+    box-sizing: border-box;
 }
 
 .product img {
@@ -150,6 +153,17 @@
     cursor: pointer;
 }
 
+/* Media query for screens smaller than 768px */
+@media (max-width: 768px) {
+    .product {
+        max-width: 100%;
+    }
+
+    .product-container {
+        justify-content: flex-start; /* Align products to the left on small screens */
+    }
+}
+