Making Google Maps responsive

maygpedersen · Mar 27, 2024 · f95d8f0 · f95d8f0
1 parent 4412c0a
commit f95d8f0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/docs/css/mesa-down-under.webflow.css b/docs/css/mesa-down-under.webflow.css
@@ -1082,6 +1082,21 @@ ul {
   */
 }
 
+/* ------ Adding lines to make Google Maps responsive */
+.google-map {
+  padding-bottom: 50%;
+  position: relative;
+}
+
+.google-map iframe {
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+}
+/* ------ Finished adding lines */
+
 li {
   margin-bottom: 10px;
 }

diff --git a/docs/lodging-information.html b/docs/lodging-information.html
@@ -43,7 +43,9 @@ <h1 class="heading-6"><strong>Lodging Information</strong></h1>
       The MESA Down Under school will take place in the <a href="https://maps.app.goo.gl/DZXAmhRCJmbq8m728" >Michael Spence Building</a>‍ at the University of Sydney.</p>
 
     <p class="paragraph-13"> 
+      <div class="google-map">
       <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3312.0146973006904!2d151.18727237601968!3d-33.8892753201203!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b12b1a3410e776f%3A0xb062d9ccc82fd8a2!2sThe%20Michael%20Spence%20Building%20(F23)!5e0!3m2!1sen!2sau!4v1711504716253!5m2!1sen!2sau" width="800" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+      </div>
     </p>
 
     <p class="paragraph-13">