Update index.css

index.css

@@ -11,7 +11,7 @@ button:focus {
 .menu-links {
     height: auto !important; /* Dynamic height */
     overflow: visible !important; /* Prevent clipping */
-    max-height: 40vh;
+    max-height: 20vh;
 }
 
 /* For screens smaller than 768px (tablets and smaller) */
@@ -29,17 +29,23 @@ button:focus {
 }
 @media (max-width: 930px) {
     .menu-links {
-        height: 20vh !important; /* Limit height to 50% of the viewport height */
+        height: 40vh !important; /* Limit height to 50% of the viewport height */
+        overflow-y: scroll !important; /* Add vertical scroll if needed */
+    }
+}
+@media (max-width: 1144px) {
+    .menu-links {
+        height: 10vh !important; /* Limit height to 50% of the viewport height */
         overflow-y: scroll !important; /* Add vertical scroll if needed */
     }
 }
 
 @media (max-width: 480px) {
     .menu-links {
-        height: 40vh !important; /* Adjust height for smaller screens */
-        overflow-x: auto !important; /* Allow horizontal scrolling if content overflows */
-        overflow-y: auto !important; /* Enable vertical scrolling */
-        width: 100% !important; /* Ensure full width of the container */
+        height: 40vh !important;
+        /* overflow-x: auto !important; Allow horizontal scrolling if content overflows */
+        overflow-y: scroll !important;
+        width: 100% !important; 
     }
 }
 
@@ -86,7 +92,7 @@ button:focus {
     overflow: hidden; /* Prevent overflow */
     word-wrap: break-word; /* Break long words into the next line if they don't fit */
     white-space: normal; /* Allow wrapping of text */
-    height: auto; /* Ensure the box expands based on content height */
+    max-height: auto; /* Ensure the box expands based on content height */
     pointer-events: none;
 }
 /* change width of info box to 30 rem for mobile screens */
@@ -192,6 +198,7 @@ button:focus {
 
 .menu-links.show {
     display: flex;
+    flex-direction: row;
     opacity: 1;
 }
 
@@ -802,6 +809,10 @@ body {
     background-color: #7c0b6f;
     color: #ffffff;
 }
+#div7 {
+    background-color: #7c0b6f;
+    color: #ffffff;
+}
 
 
 /* Table Styling */