Update templates/cart.html

templates/cart.html

@@ -271,26 +271,25 @@
 .suggestion-items-container {
     display: flex;
     overflow-x: auto; /* Horizontal scrolling */
-    gap: 15px; /* Space between items */
+    gap: 10px; /* Reduce space between items */
     padding-bottom: 10px;
-    margin-left: 5px;
-    padding-top: 5px;
+    padding-top: 10px;
 }
 
-/* Card styling */
+/* Smaller and more compact card styling */
 .suggestion-item {
     display: flex; /* Use flexbox for horizontal layout */
     align-items: center; /* Center content vertically */
     justify-content: space-between; /* Space out content */
     flex-shrink: 0;
-    width: 250px; /* Set fixed width for each suggestion item */
-    padding: 10px;
-    border-radius: 10px;
+    width: 140px; /* Reduced width for smaller cards */
+    padding: 8px; /* Reduced padding */
+    border-radius: 8px; /* Slightly smaller border radius */
     background-color: #fff;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
-    margin-right: 15px; /* Ensure there's space between the cards */
-    position: relative; /* Make sure button is placed correctly */
+    margin-right: 10px; /* Ensure there's space between the cards */
+    position: relative; /* For positioning the + icon */
 }
 
 .suggestion-item:hover {
@@ -298,26 +297,26 @@
 }
 
 .suggestion-item img {
-    width: 80px; /* Adjust image size */
-    height: 80px;
+    width: 50px; /* Smaller image */
+    height: 50px; /* Smaller image */
     object-fit: cover; /* Ensure image fits correctly without distortion */
     border-radius: 5px;
-    margin-left: 10px; /* Add space between the image and text */
+    margin-left: 8px; /* Space between the image and text */
 }
 
 .suggestion-item div {
     flex-grow: 1;
-    margin-right: 10px; /* Space between the image and text */
     text-align: left; /* Align text to the left */
+    margin-right: 8px; /* Space between text and image */
 }
 
 /* Styling for the + symbol button (with no borders) */
 .add-icon {
     position: absolute;
-    top: 10px; /* Position at the top */
-    right: 10px; /* Position at the top-right */
-    font-size: 1.5rem; /* Increase size of the + symbol */
-    padding: 8px 12px; /* Button padding */
+    top: 5px; /* Position at the top */
+    right: 5px; /* Position at the top-right */
+    font-size: 1.2rem; /* Adjust size of the + symbol */
+    padding: 6px 10px; /* Button padding */
     background-color: #fff; /* White background */
     color: #0FAA39; /* Green color for the + symbol */
     border: none; /* No border */