fixed booking padding on mobile

Lmears · Apr 11, 2024 · fbfa460 · fbfa460
1 parent 0e9d36b
commit fbfa460
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -41,6 +41,13 @@ html {
     max-width: 1160px;
 }
 
+/* Booking container */
+#booking-container {
+    height: 100%;
+    box-sizing: border-box;
+    max-width: 1160px;
+}
+
 /* Headings */
 h1 {
     min-width: 303.44px;
@@ -160,6 +167,15 @@ nav ul li a.selected .nav-link-text {
         padding: 1rem;
     }
 
+    #booking-container {
+        flex-direction: column;
+        padding-top: 1rem;
+        padding-right: 0.5rem;
+        padding-bottom: 1rem;
+        padding-left: 0.5rem;
+
+    }
+
     .home-logo {
         padding-bottom: 10px !important;
         max-width: 48px;

diff --git a/booking/index.html b/booking/index.html
@@ -23,7 +23,7 @@
 </style>
 
 <body class="bg-gray-800 text-gray-300">
-    <main id="container" class="flex p-10 max-w-7xl mx-auto">
+    <main id="booking-container" class="flex p-10 max-w-7xl mx-auto">
         <header>
             <nav class="py-3 flex flex-col">
                 <button id="hamburger-menu" aria-label="Menu">&#9776;</button>
@@ -45,7 +45,7 @@ <h1 class="w-full text-5xl leading-tight px-4">Booking</h1>
             <div class="pt-12">
                 <div class="visual-container">
                     <div class="flex flex-col sm:flex-row justify-start my-4 sm:my-4">
-                        <div class="px-4 w-full">
+                        <div class="sm:px-0 md:px-4 w-full">
                             <div class="iframe-container">
                                 <iframe
                                     src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ1i0sKVIrPUn9n4DPGSscS9byPDX_PlTqmgfSYP7UcXd4ngQCfr3-NvuJqOGcMXsbjjkvimRABy?gv=true"