Fix issue#29 Map view dissappears in mobile view (#34)

fossasia · Jan 5, 2020 · 65e3a51 · 65e3a51
1 parent ebadcfb
commit 65e3a51
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -1,3 +1,17 @@
+.map-responsive{
+  overflow:hidden;
+  padding-bottom:50%;
+  position:relative;
+  height:0;
+}
+.map-responsive iframe{
+  left:0;
+  top:0;
+  height:100%;
+  width:100%;
+  position:absolute;
+}
+
 .dark-layer {
   content: "";
   background-color: rgba(0, 0, 0, 0.4);

diff --git a/css/theme-lava.css b/css/theme-lava.css
@@ -1994,7 +1994,7 @@ p.question {
   color: #fff;
   position: relative;
   overflow: hidden;
-  height: 600px;
+  /* height: 600px; */
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;

diff --git a/index.html b/index.html
@@ -3448,28 +3448,26 @@ <h1>Co-Organizer</h1>
 
         <a id="venue" class="in-page-link"></a>
         <section class="contact-tweets">
-            <div class="container vertical-align">
+            <div class="container">
                 <div class="row">
-                    <div class="col-md-5 col-sm-6">
+                    <div class="col-md-6 col-sm-12">
                         <i class="icon social_twitter"></i>
-                        <!-- Parameters documentation at https://github.com/fossasia/fossasia-loklak-webtweets/blob/gh-pages/README.md -->
                         <div class="tweets-feed" data-count=3 data-from="fossasia">
+                            <span class="text-white">Follow
+                                <a target="default" href="https://twitter.com/fossasia">@fossasia</a> for more updates</span>
+                            <img class="icon social_rss" src="img/rss.png" alt="rss">
+                            <div id="result"></div>
+                            <span class="text-white">
+                                <a target="default" href="http://www.lli.sg/">Lifelong Learning Institute Singapore</a> is the event location for the FOSSASIA Summit. Address:
+                                11 Eunos Road 8, Singapore 408601 (Paya Lebar MRT)
+                            </span>
                         </div>
-                        <span class="text-white">Follow
-                            <a target="default" href="https://twitter.com/fossasia">@fossasia</a> for more updates</span>
-                        <img class="icon social_rss" src="img/rss.png" alt="rss">
-                        <div id="result"></div>
-                        <span class="text-white">
-                            <a target="default" href="http://www.lli.sg/">Lifelong Learning Institute Singapore</a> is the event location for the FOSSASIA Summit. Address:
-                            11 Eunos Road 8, Singapore 408601 (Paya Lebar MRT)
-                        </span>
-                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+                    </div>
+                    <div class="col-md-6 col-sm-12 map-responsive">
+                        <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=103.8914528489113%2C1.3187927641225512%2C103.89350205659868%2C1.320457974155969&amp;layer=mapnik&amp;marker=1.3196253692786193%2C103.89247745275497"></iframe>
                     </div>
                 </div>
             </div>
-            <div class="map col-md-6 col-sm-4 maps">
-                <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=103.8914528489113%2C1.3187927641225512%2C103.89350205659868%2C1.320457974155969&amp;layer=mapnik&amp;marker=1.3196253692786193%2C103.89247745275497"></iframe>
-            </div>
         </section>
         </div>