Make CapeTown widget working also on mobile

layouts/partials/cpt.html

 <div id="capetown">
-   <div><b>Cape Town crisis</b></div>
-   <div><span class="cpttitle">0 day is: </span><span id="cpt0day" class="cptvalue"></span></div>
-   <div><span class="cpttitle">days before 0: </span><span id="cptdays" class="cptvalue"></span> </div>
-   <div><span class="cpttitle">citizen saving water: </span><span id="cptcitizen" class="cptvalue"></span></div>
-   <div><span class="cpttitle">Dams level: </span><span id="cptdams" class="cptvalue"></span></div>
+   <div class="cpthead"><b>Cape Town crisis: </b></div>
+   <div class="cptrow"><span class="cpttitle">0 day is: </span><span id="cpt0day" class="cptvalue"></span></div>
+   <div class="cptrow"><span class="cpttitle">days before 0: </span><span id="cptdays" class="cptvalue"></span> </div>
+   <div class="cptrow"><span class="cpttitle">citizen saving water: </span><span id="cptcitizen" class="cptvalue"></span></div>
+   <div class="cptrow"><span class="cpttitle">Dams level: </span><span id="cptdams" class="cptvalue"></span></div>
 </div>

static/css/htw.css

 #capetown {
    background-color: white;
    width: 180px;
-   height: 100px;
+   max-height: 100px;
    position: fixed;
    top: 30px;
    left: 30px;
@@ -16,7 +16,21 @@
 @media (max-width: 900px) {
 
    #capetown {
-      display: none;
+      /* display: none */;
+      width: 100%;
+      top: 0px;
+      left: 0px;
+      border-radius: 0px;
+   }
+
+   .cptrow {
+      display: table;
+      float: left;
+      padding-left: 5px;
+   }
+
+   .cpthead {
+      float: left;
    }
 
 }