Update templates/cart.html

templates/cart.html

@@ -271,10 +271,9 @@
 .suggestion-items-container {
     display: flex;
     overflow-x: auto; /* Horizontal scrolling */
-    gap: 15px; /* Space between items */
+    gap: 10px; /* Space between items */
     padding-bottom: 10px;
-    margin-left: 5px;
-    padding-top: 5px;
+    padding-top: 10px;
 }
 
 /* Styling for the suggestion item card */
@@ -283,13 +282,14 @@
     align-items: center; /* Center image and text vertically */
     justify-content: flex-start; /* Align items to the start (left side) */
     flex-shrink: 0;
-    width: 160px; /* Adjust width for compactness */
+    width: 160px; /* Set fixed width for each suggestion item */
     padding: 10px;
     border-radius: 8px; /* Rounded corners */
     background-color: #fff;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
-    margin-right: 15px; /* Space between the cards */
+    margin-right: 10px; /* Ensure there's space between the cards */
+    position: relative; /* For positioning the + icon */
     text-align: left; /* Align text to the left */
 }
 
@@ -300,7 +300,7 @@
 .suggestion-item img {
     width: 50px; /* Set a fixed width for the image */
     height: 50px; /* Set a fixed height for the image */
-    object-fit: cover; /* Ensure image fits without distortion */
+    object-fit: cover; /* Ensure image fits correctly without distortion */
     border-radius: 5px; /* Rounded corners for the image */
     margin-right: 12px; /* Space between the image and text */
 }
@@ -309,26 +309,29 @@
     flex-grow: 1; /* Allow the text section to expand and fill available space */
 }
 
-/* Adjust the + button styles */
+/* Styling for the + symbol button (with green border, white background, and black text) */
 .add-back-button {
-    padding: 6px 20px;
-    font-size: 0.9rem;
-    border-radius: 20px;
-    border: 1px solid #0FAA39; /* Green border */
+    position: absolute;
+    top: 5px; /* Position at the top */
+    right: 5px; /* Position at the top-right */
+    font-size: 1.3rem; /* Increase size of the + symbol */
+    padding: 6px 10px; /* Button padding */
     background-color: #fff; /* White background */
-    color: #0FAA39; /* Green text */
+    color: #000; /* Black color for the + symbol */
+    border: 2px solid #0FAA39; /* Green border */
+    border-radius: 50%; /* Circular button */
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+    z-index: 1; /* Ensure the button is above content */
 }
 
-/* On hover, keep text green and border green */
 .add-back-button:hover {
-    background-color: #fff;
-    color: #0FAA39; /* Green color stays on hover */
+    background-color: #0FAA39; /* Green background on hover */
+    color: #fff; /* White color for the + symbol when hovered */
     border-color: #0FAA39; /* Green border on hover */
 }
 
-/* Styling for the scrolling section */
+/* Ensure the scroll container works fine */
 .suggestion-items-container::-webkit-scrollbar {
     height: 8px; /* Height of the scrollbar */
 }