Update templates/cart.html

templates/cart.html

@@ -64,20 +64,23 @@
     text-align: right; /* Center-align the price */
     white-space: nowrap; /* Prevent price text from wrapping */
 }
-/* Default for larger screens like desktops */
+/* For the image container */
 .image-wrapper {
     width: 80px;                     /* Width of the image container */
-    height: 140px !important;         /* Height of the image container */
-    display: flex;                   /* Flex container for the image */
-    align-items: flex-start;         /* Align the image at the top */
-    justify-content: center;         /* Center image horizontally if it has space */
+    height: 80px !important;          /* Set the height of the container to match the image */
+    display: flex;                    /* Flex container for the image */
+    align-items: center;              /* Center image vertically */
+    justify-content: center;          /* Center image horizontally */
 }
+
+/* For the image */
 .cart-item img {
-    width: 70px;                  /* Set the width to 70px */
-    height: 70px;                 /* Set the height to 70px */
-    object-fit: contain;          /* Ensure the whole image is visible */
-    border-radius: 5px;           /* Optional: rounded corners */
-    border: 1px solid #ffcc80;    /* Light orange border around images */
+    width: 70px;                      /* Set the width to 70px */
+    height: 70px;                     /* Set the height to 70px */
+    object-fit: cover;                /* Ensure the image covers the container without stretching */
+    border-radius: 5px;               /* Optional: rounded corners */
+    border: 1px solid #ffcc80;        /* Light orange border around images */
+    margin: 0;                         /* Ensure no extra space around the image */
 }