From 6fa08cf5b71b197501c3b026c8c789ff7094c5ef Mon Sep 17 00:00:00 2001
From: alicestrt <alice.strt@gmail.com>
Date: Fri, 15 Jan 2021 18:45:46 +0100
Subject: [PATCH] map legend display small screens

---
 index.html           |  2 +-
 static/css/style.css | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 5084268..f58005e 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@
   <div class="col-md-9" style="position: static;">
     <div class="row">
 
-  <div class="col-md-5 offset-md-1">
+  <div class="col-md-5 offset-md-1 col-sm-6 offset-sm-3 col-xs-6 offset-xs-3">
     <button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
 <audio id="audioBG"
 preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
diff --git a/static/css/style.css b/static/css/style.css
index b934bba..8976519 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -69,8 +69,9 @@ button {
   background-color: #fff0f000;
 }
 #dur1 {
-margin-top: 40px;
+margin-top: 45px;
 }
+
 .audio-button {
   background: transparent;
   color:inherit;
@@ -483,6 +484,19 @@ color: #d81159;
   .map_legend p {
     font-size: 0.8em;
   }
+  #box1, #box2, #box3, #box4 {
+    display: block;
+
+  }
+#box1 {
+  margin-left: 10px;
+}
+}
+
+@media (max-width: 550px) {
+
+  .map_legend p {
+    font-size: 0.5em;
+  }
 
-  
 }