removes map when vw < 600px (#728)

* removes map when vw < 600px

* responsive map box + change flex dir. on mobile

* lint fixes

* double quote -> single quote

* single quotes + css classes

Author: smalex-z

pages/gm.js

@@ -218,9 +218,16 @@ function gm() {
 			<div className='content-container-tight text-center'>
         <div id='info-wrapper'>
           <h2>Relevant information</h2>
-          <div className='flex'>
-            <div>
-              <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 rel-info'>
+            <div className='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'
+                className='map-frame'
+                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>

styles/components/GM.scss

@@ -123,6 +123,20 @@
   text-decoration: none;
 }
 
+.rel-info {
+  height: 400px;
+}
+
+.map-container {
+  flex-grow: 1;
+  width: 100%;
+}
+
+.map-frame {
+  height: 100%;
+  width: 100%;
+}
+
 .flex {
   display: flex;
 
@@ -141,6 +155,20 @@
   }
 }
 
+@media (max-width: 640px) {
+  .rel-info {
+    flex-direction: column;
+    height: 450px;
+  }
+
+  .flex { 
+    .what-to-bring {
+      margin-left: 0;
+      margin-top: 15px;
+    }
+  }
+}
+
 #countdown-wrapper {
   display: flex;
   flex-wrap: wrap;