Update templates/cart.html

templates/cart.html

@@ -115,7 +115,7 @@
             font-size: 1rem;
             margin: 0 5px;
         }
-        /* Ensure the parent container is relative for absolute positioning */
+    /* Make the parent container position relative */
 .cart-summary {
     position: relative; /* Make sure dropdown is positioned relative to this container */
     text-align: left;
@@ -128,20 +128,20 @@
 
 /* Coupon Dropdown styling */
 #couponDropdown {
-    width: 30%; /* Set dropdown width to 30% */
+    width: 30%; /* Set dropdown to 30% of the width */
+    position: absolute; /* Position it absolutely within the parent container */
+    right: 0; /* Align it to the right side of the container */
+    top: 40px; /* Adjust dropdown position to be just below the Apply Coupon link */
     display: none; /* Hidden by default */
     background-color: #fff;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
-    z-index: 10; /* Ensure it stays above other content */
+    z-index: 10; /* Ensure it's above other content */
     margin-top: 10px; /* Add space from the link */
-    position: absolute; /* Position it absolutely */
-    top: 40px; /* Adjust dropdown position to be below the Apply Coupon link */
-    right: 0; /* Align it to the right of the container */
 }
 
 /* Show the dropdown when it's active */
 #couponDropdown.show {
-    display: block; /* Show the dropdown when active */
+    display: block;
 }
 
 /* Ensure Apply Coupon section aligns correctly */
@@ -216,6 +216,7 @@
     margin-bottom: 80px; /* Create space below the content when dropdown is visible */
 }
 
+
         .checkout-button {
             background-color: #0FAA39;
             color: #fff;