[Docs] Fix the google slides on mobile

ai4co · Jul 26, 2024 · c038c7e · c038c7e
1 parent 449cb2f
commit c038c7e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -212,19 +212,19 @@ <h2 class="title is-3">Abstract</h2>
   <br>
 
   <!-- Embedded Google Slides -->
-  <section class="hero teaser">
-    <div class="container is-max-desktop">
-      <h2 class="title is-4">ICML 2024 FM-Wild Workshop Oral Presentation Slides</h2>
-      <div class="hero-body">
-        <iframe
-          src="https://docs.google.com/presentation/d/e/2PACX-1vSxPBfuH2Ydrc3Y1y7YTjGar-IQ-RG6HoTHbQs3sAboDD5tp-aL66-AESeK35P7JmvKJx9GEAgHIvsu/embed?start=false&loop=false&delayms=3000"
-          frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true"
-          webkitallowfullscreen="true"></iframe>
+  <section class="google-slides-section">
+    <div class="google-slides-container">
+      <h2 class="title is-2 has-text-centered mb-6">Google Slides</h2>
+      <div class="responsive-iframe-container">
+        <!-- <iframe class="responsive-iframe" src="https://docs.google.com/presentation/d/1mF1CGOW1-P-sLYsw67014I7rL-SP16IMK7rllZAfRIM/edit?usp=sharing" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> -->
+        <iframe class="responsive-iframe" src="https://docs.google.com/presentation/d/1mF1CGOW1-P-sLYsw67014I7rL-SP16IMK7rllZAfRIM/embed?start=false&loop=false&delayms=3000" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
+
       </div>
     </div>
-  </section>
   <!-- End embedded Google Slides -->
 
+  <br><br>
+
   <section class="hero teaser">
     <div class="container is-max-desktop">
       <h2 class="title is-3">Vehicle Routing Problems</h2>

diff --git a/static/css/index.css b/static/css/index.css
@@ -196,3 +196,43 @@ img {
   margin-left: auto;
   margin-right: auto;
 }
+
+
+.google-slides-section {
+  padding: 3rem 0;
+  background-color: #f5f5f5;
+}
+
+.google-slides-container {
+  width: 100%;
+  max-width: 1200px; /* Increased maximum width */
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.responsive-iframe-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.responsive-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+@media screen and (min-width: 1024px) {
+  .google-slides-section {
+    padding: 4rem 0;
+  }
+
+  .responsive-iframe-container {
+    height: 75vh; /* Set a large fixed height for larger screens */
+    padding-top: 0; /* Remove padding-top for larger screens */
+  }
+}