responsive map box + change flex dir. on mobile

uclaacm · Oct 31, 2024 · 21f2670 · 21f2670
1 parent 28809c8
commit 21f2670
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/pages/gm.js b/pages/gm.js
@@ -218,22 +218,16 @@ function gm() {
 			<div className='content-container-tight text-center'>
         <div id='info-wrapper'>
           <h2>Relevant information</h2>
-          <div className='flex'>
-            <style>
-              {`
-                .map-container {
-                  display: none;
-                }
-
-                @media (min-width: 600px) {
-                  .map-container {
-                    display: block;
-                  }
-                }
-              `}
-            </style>
-            <div class="map-container">
-              <iframe src='https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13219.85897956824!2d-118.4441451!3d34.070418!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x62f97fe423993f80!2sUCLA%20Ackerman%20Union!5e0!3m2!1sen!2sin!4v1663063464157!5m2!1sen!2sin' width='450' height='400' style={{border: 0}} allowfullscreen='' loading='lazy' title='google maps embed of ackerman grand ballroom' referrerPolicy='no-referrer-when-downgrade'></iframe>
+          <div className='flex map-container'>
+            <div style={{flexGrow: 1, width: "100%"}}>
+              <iframe 
+                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13219.85897956824!2d-118.4441451!3d34.070418!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x62f97fe423993f80!2sUCLA%20Ackerman%20Union!5e0!3m2!1sen!2sin!4v1663063464157!5m2!1sen!2sin" 
+                style={{ width: "100%", height: "100%"}} 
+                allowFullScreen=""
+                loading="lazy" 
+                title="google maps embed of ackerman grand ballroom" 
+                referrerPolicy="no-referrer-when-downgrade"
+              ></iframe>
             </div>
             <div className='what-to-bring'>
               <h3>How to get there</h3>

diff --git a/styles/components/GM.scss b/styles/components/GM.scss
@@ -123,6 +123,10 @@
   text-decoration: none;
 }
 
+.map-container {
+  height: 400px;
+}
+
 .flex {
   display: flex;
 
@@ -141,6 +145,20 @@
   }
 }
 
+@media (max-width: 640px) {
+  .map-container {
+    height: 450px;
+    flex-direction: column;
+  }
+
+  .flex { 
+    .what-to-bring{
+      margin-left: 0;
+      margin-top: 15px;
+    }
+  }
+}
+
 #countdown-wrapper {
   display: flex;
   flex-wrap: wrap;