Having trouble positioning two bars with green or blue filling in the bottom right corner? They keep moving around and not staying in place regardless of screen size. Check out how they are off-screen here
Below is the CSS-Styling + HTML code:
.element-1 {
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width: 10%;
height: 20px;
position: fixed;
margin-top: 38.5%;
margin-left: 75.5%;
}
.element-2 {
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width: 10%;
height: 20px;
position: fixed;
margin-top: 38.5%;
margin-left: 91.7%;
}
.meter {
background: rgba(65, 60, 60, 0.39);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
box-shadow: inset 0 -1px 1px rgb(184, 45, 45);
display: block;
top: 8%;
width: 270px;
height: 20px;
margin-bottom: 10px;
padding: 5px;
margin-left: 10px;
position: absolute;
}
.meter>span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #2bc253;
background-image: linear-gradient(to bottom, #0ff, #1e90ff);
box-shadow: inset 0 2px 9px rgba(51, 48, 48, 0.3) inset 0 -2px 6px rgba(0, 0, 0, 0.4);
overflow: hidden;
transition: width 2s ease-out;
}
<div class="bars">
<ul>
<li>
<div class="meter cadetblue element-1">
<span data-progress="0" style="width:0;" id="bar-hunger"></span>
</div>
</li>
<li>
<div class="meter element-2">
<span data-progress="0" style="width:0;" id="bar-thirst"></span>
</div>
</li>
</ul>
</div>