Update templates/cart.html

templates/cart.html

@@ -69,24 +69,30 @@
     text-align: right; /* Center-align the price */
     white-space: nowrap; /* Prevent price text from wrapping */
 }
-      @media (max-width: 768px) {
-          .image-wrapper {
-              width: 60px;                  /* Adjust the width for smaller screens */
-             height: 100px !important;     /* Adjust the height for smaller screens */
-          }
-      }
-
-        .image-wrapper {
-            width: 80px;                    /* Width of the image container */
-            height: 140px !important;                   /* Height of the image container */
-            display: flex;                  /* Flex container for image */
-            align-items: flex-start;        /* Align the image at the top */
-            justify-content: center;        /* Center image horizontally if it has space */
-        }
+/* Default for larger screens like desktops */
+.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 */
+}
+
+/* Responsive for mobile devices */
+@media (max-width: 768px) {
+    .image-wrapper {
+        width: 60px;                 /* Adjust width for mobile */
+        height: auto !important;     /* Let height adjust automatically based on content */
+        max-height: 100px;           /* Set a max height to avoid image getting too large */
+    }
+}
+
         .cart-item img {
             width: 100%;                    /* Fill the image container */
             height: auto !important;                   /* Maintain aspect ratio */
-            object-fit: contain;            /* Ensure the full image is visible */
+            object-fit: contain; 
+            border-radius: 8px;            /* Optional: rounded corners */
+            transition: transform 0.3s;/* Ensure the full image is visible */
            
         }
         .cart-item img:hover {