Update templates/cart.html

templates/cart.html

@@ -30,23 +30,30 @@
         
 
         .cart-item {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
+            display: flex;                  /* Flexbox layout for the cart item */
+            align-items: flex-start;         /* Ensure the image and content align at the top */
+            justify-content: space-between;  /* Spread image and content across the container */
             border-bottom: 1px solid #e0e0e0;
             padding: 15px 0;
-            height: auto; /* Ensure the container height adjusts to its content */
         }
+
+        .image-wrapper {
+            width: 80px;                    /* Width of the image container */
+            height: 80px;                   /* 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 */
+        }
+
         .cart-item img {
-            width: 80px; /* Adjust the width automatically */
-            height: 100px; /* Increased height */
-            object-fit: contain; /* Ensures the whole image is visible */
-            border-radius: 8px;
+            width: 100%;                    /* Fill the image container */
+            height: auto;                   /* Maintain aspect ratio */
+            object-fit: contain;            /* Ensure the full image is visible */
+            border-radius: 8px;             /* Optional: rounded corners */
             transition: transform 0.3s;
-            margin-bottom: 10px;
-            align-self: flex-start;         /* Ensure the image aligns to the top */
         }
 
+
         .cart-item img:hover {
             transform: scale(1.05);
         }
@@ -179,7 +186,9 @@
             <!-- Cart Items -->
             {% for item in cart_items %}
             <div class="cart-item">
-                <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                <div class="image-wrapper">
+                    <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+               </div>
                 <div class="cart-item-details">
                     <div class="cart-item-title">
                         {{ item.Name }}