Update templates/cart.html

templates/cart.html

@@ -20,51 +20,157 @@
             background-color: #f3f4f6;
             color: #333;
         }
-        .cart-container {
-            max-width: 768px;
-            margin: 30px auto;
-            padding: 20px;
-            background-color: #fff;
-            border-radius: 12px;
-            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-            transition: box-shadow 0.3s ease-in-out;
-        }
-        .cart-container:hover {
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
-        }
-        
-        .cart-item {
+/* General Styles */
+.cart-container {
+    border-radius: 10px;
+    border: 2px solid #ccc;
+    background-color: #f9f9f9;
+    padding: 15px;
+    box-sizing: border-box;
+    width: 100%; /* Make the container take full width */
+    max-width: 100%; /* Ensure the container does not exceed screen size */
+    margin: 30px auto; /* Centering container */
+    background-color: #fff;
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease-in-out;
+}
+
+.cart-item {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    border: 1px solid transparent; /* Set the border to transparent */
-    padding: 15px; /* Padding for the content */
+    border: 1px solid transparent;
+    padding: 15px;
     box-sizing: border-box;
     min-height: 100px;
-    position: relative; /* Make the cart item a reference for the absolute positioning of the remove icon */
-}set corner radius 10px, background color stroke
-
-
+    position: relative;
+}
 
 .cart-item-actions {
     display: flex;
-    align-items: center; /* Align items vertically in the center */
-    justify-content: flex-end; /* Align content to the right */
-    width: 100%; /* Ensure the container takes up the full width */
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
 }
 
 .remove-btn {
-    border: none; /* Remove the border around the button */
-    background-color: transparent; /* Transparent background */
-    cursor: pointer; /* Change cursor to pointer */
-    font-size: 1.5rem; /* Adjust the size of the trash icon */
-    margin-bottom: 10px; /* Add space below the delete icon */
-    transition: color 0.3s ease; /* Smooth transition for icon color */
-    position: relative; /* Make it relative for movement */
-    top: -40px; /* Move the button 10px upwards */
-    left: 50px; /* Move the button 30px to the right */
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    font-size: 1.5rem;
+    margin-left: 10px; /* Adjust space between price and icon */
+    transition: color 0.3s ease;
+}
+
+.text-primary {
+    color: #000 !important;
+    text-align: right;
+    white-space: nowrap;
+}
+
+/* Flexbox for images */
+.image-wrapper {
+    width: 80px;
+    height: auto; /* Removed fixed height to allow flexibility */
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
 }
 
+/* Ensure image scales correctly */
+.cart-item img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    border-radius: 8px;
+    transition: transform 0.3s;
+}
+
+/* Make the cart item responsive */
+.cart-item-details {
+    flex: 1;
+    margin-left: 15px;
+}
+
+/* Mobile Responsive Fix */
+@media (max-width: 768px) {
+    /* Cart container */
+    .cart-container {
+        padding: 10px; /* Adjust padding on smaller screens */
+        margin: 10px; /* Reduced margin for smaller screens */
+    }
+
+    /* Cart item layout */
+    .cart-item {
+        flex-direction: column; /* Stack items vertically on mobile */
+        align-items: flex-start; /* Align items to the left */
+    }
+
+    /* Adjust the image size for mobile */
+    .image-wrapper {
+        width: 60px; /* Smaller image container */
+        height: 100px; /* Adjust height for mobile */
+    }
+
+    .cart-item img {
+        width: 100%;
+        height: auto;
+    }
+
+    /* Cart item actions (delete icon and price) */
+    .cart-item-actions {
+        flex-direction: row; /* Align icon and price horizontally */
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 10px; /* Space between cart item details and actions */
+    }
+
+    /* Adjust button size and spacing for mobile */
+    .remove-btn {
+        font-size: 1.2rem; /* Smaller icon size */
+    }
+
+    .text-primary {
+        font-size: 1rem; /* Adjust price font size */
+    }
+
+    .cart-item-quantity button {
+        width: 30px; /* Adjust button size */
+        height: 30px;
+    }
+
+    .cart-item-quantity input {
+        width: 35px; /* Adjust input field */
+        font-size: 0.9rem;
+    }
+}
+
+/* For smaller mobile screens */
+@media (max-width: 480px) {
+    .cart-item img {
+        width: 50px; /* Further reduce image size */
+    }
+
+    .cart-item-quantity button {
+        width: 28px;
+        height: 28px;
+    }
+
+    .cart-item-quantity input {
+        width: 30px;
+    }
+}
+
+       
+        .cart-container:hover {
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+        }
+       
+
+
+
+
+
 /* Hover effect */
 .remove-btn:hover {
     color: black; /* Change the icon color to black on hover */
@@ -77,31 +183,14 @@
     background-color: transparent; /* Keep background transparent after clicking */
 }
 
-.text-primary {
-    color: #000 !important; /* Ensure the price is black */
-    text-align: right; /* Center-align the price */
-    white-space: nowrap; /* Prevent price text from wrapping */
-}
 
 
 
 
 
 
-        .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 */
-        }
-        .cart-item img {
-            width: 100%;                    /* Fill the image container */
-            height: auto !important;                   /* Maintain aspect ratio */
-            object-fit: contain;            /* Ensure the full image is visible */
-            border-radius: 8px;             /* Optional: rounded corners */
-            transition: transform 0.3s;
-        }
+       
+        
         .cart-item img:hover {
             transform: scale(1.05);
         }
@@ -140,10 +229,7 @@
             color: #0FAA39;
         }
         
-        .cart-item-details {
-            flex: 1;
-            margin-left: 15px;
-        }
+        
        
         .cart-item-quantity {
             display: flex;