Make CapeTown widget working also on mobile

parent cc420b1d
<div id="capetown"> <div id="capetown">
<div><b>Cape Town crisis</b></div> <div class="cpthead"><b>Cape Town crisis: </b></div>
<div><span class="cpttitle">0 day is: </span><span id="cpt0day" class="cptvalue"></span></div> <div class="cptrow"><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 class="cptrow"><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 class="cptrow"><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="cptrow"><span class="cpttitle">Dams level: </span><span id="cptdams" class="cptvalue"></span></div>
</div> </div>
#capetown { #capetown {
background-color: white; background-color: white;
width: 180px; width: 180px;
height: 100px; max-height: 100px;
position: fixed; position: fixed;
top: 30px; top: 30px;
left: 30px; left: 30px;
...@@ -16,7 +16,21 @@ ...@@ -16,7 +16,21 @@
@media (max-width: 900px) { @media (max-width: 900px) {
#capetown { #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;
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment