I'm currently developing a responsive bar chart, and everything seems to be going smoothly except for one issue - when viewing it in full screen, the bars appear to be flipped upside down. It's quite puzzling as all other elements such as text and styles are displaying correctly.
You can check out my HTML/CSS code here: https://codepen.io/janbe30/pen/YepGWB/ or simply view the code snippet below.
<h1>Bold Goal Measures</h1>
<figure>
<figcaption>Modifiable Health Risks</figcaption>
<ul class="chart">
<li id="risk-1" class="bar" title="3.2">
<div class="count">3.2</div>
<div class="year">2012</div>
</li>
<li id="risk-2" class="bar" title="3.0">
<div class="count">3.0</div>
<div class="year">2013</div>
</li>
<li id="risk-3" class="bar" title="3.0">
<div class="count">3.0</div>
<div class="year">2014</div>
</li>
<li id="risk-4" class="bar" title="2.93">
<div class="count">2.93</div>
<div class="year">2015</div>
</li>
<li id="risk-5" class="bar" title="2.96">
<div class="count">2.96</div>
<div class="year">2016</div>
</li>
<li id="risk-6" class="bar" title="3.2">
<div class="count">3.2</div>
<div class="year">2017</div>
</li>
</figure>
body {
font-family: Helvetica, sans-serif;
color: rgb(65, 64, 66);
font-size: 1rem;
}
.chart {
width: 100%;
clear: both;
padding: 0;
}
.chart li {
display: block;
border-radius: 0.2em 0.2em 0 0;
height: 3em;
padding: 1.5em 0;
position: relative;
text-align: center;
vertical align: bottom;
}
/* Styling of bars and text */
.chart .bar {
background: linear-gradient(rgba( 65, 64, 66, .9), rgba(72,70,65, .9));
margin: 0.3em;
}
.chart .bar:last-child {
background: linear-gradient(rgba(78,131,23, .9), rgba(78,132,22, .9) 70%);
}
.chart .count {
font-size: 1.8em;
font-weight: bold;
color: #fff
}
.chart .year {
font-size: 0.9em;
letter-spacing: 1px;
opacity: .6;
width: 100%;
color: #fff;
}
/*******************************
===== Media Queries ===========
******************************/
@media (min-width:700px){
.chart {
height: 20em;
margin: 0 auto -1em;
}
.chart li {
display: inline-block;
height: 25em;
margin: 0 1% 0 0;
width: 10% !important;
}
.chart .bar {
margin: 0.3em 0.1em;
}
.chart .year {
position: absolute;
bottom: 1em;
}
}
I've double-checked my code multiple times but still can't figure out this issue! Any help would be greatly appreciated. Thank you!