Enhance responsive design in CSS for better mobile usability

website/betaal.css

@@ -4,13 +4,16 @@ body {
     padding: 50px;
     background-color: #f9f9f9;
 }
+
 h1 {
     color: #F56E28;
 }
+
 p {
     font-size: 1.2em;
     margin-top: 20px;
 }
+
 button {
     margin-top: 30px;
     padding: 10px 20px;
@@ -20,6 +23,27 @@ button {
     cursor: pointer;
     font-size: 1.1em;
 }
+
 button:hover {
     background-color: #F56E28;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    body {
+        padding: 20px;
+    }
+
+    h1 {
+        font-size: 1.5em;
+    }
+
+    p {
+        font-size: 1em;
+    }
+
+    button {
+        font-size: 1em;
+        padding: 10px 15px;
+    }
 }

website/style.css

@@ -33,6 +33,7 @@ body {
     transform: translate(0, 0);
     justify-content: space-around; /* Spread the menu items */
     flex-wrap: nowrap; /* Ensure all items are in a single row */
+    overflow-x: auto; /* Enable horizontal scrolling */
 }
 
 .menu-bar.dark {
@@ -211,19 +212,19 @@ body {
 /* Responsive design */
 @media (max-width: 768px) {
     .menu-bar {
-        flex-wrap: wrap; /* Allow wrapping of menu items */
+        flex-wrap: nowrap; /* Ensure all items are in a single row */
         width: 100%; /* Use full width for menu bar */
         top: 0; /* Fix the menu bar to the top */
         left: 0;
         transform: translate(0, 0);
-        justify-content: space-around; /* Spread the menu items */
+        justify-content: flex-start; /* Align items to the start */
-        flex-wrap: wrap; /* Ensure all items are in a single row */
+        overflow-x: auto; /* Enable horizontal scrolling */
         padding: 10px; /* Add padding for better spacing */
     }
 
     .menu-item {
-        flex: 1 1 48%; /* Make each menu item take half width */
+        flex: none; /* Remove flex-grow to fit all items in a single row */
-        margin: 5px 1%; /* Add margin between items */
+        margin: 5px; /* Add margin between items */
         font-size: 1em; /* Adjust font size for better readability */
     }
 
@@ -256,6 +257,13 @@ body {
         bottom: 20px; /* Position at the bottom */
         left: 20px; /* Position at the left */
     }
+
+    .logo {
+        width: 80%; /* Adjust width for smaller screens */
+        max-width: 300px; /* Set a maximum width */
+        padding: 20px; /* Adjust padding */
+        margin: 10px auto; /* Adjust margin */
+    }
 }
 
 /* Winkelmandje sectie */