map legend display small screens

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)">

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;
+  }
 
 }