CSS3 bar chart is upside down? - html

Question

I'm working on a responsive bar chart and everything is going great, except in full view the bars seems to be flipped upside down. It makes no sense since everything else (text and other styles) are right.
You can see my HTML/CSS here: https://codepen.io/janbe30/pen/YepGWB/ and I also pasted it below.
<h1>Bold Goal Measures</h1>
<figure>
<!--<h2>Unhealthy Days</h2>-->
<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;
/*font-family: FSHumanaLight */
letter-spacing: 1px;
opacity: .6;
width: 100%;
color: #fff;
}
/* set widths for each bar based on percentages for each year
.chart #risk-1, #risk-6 { width: 64%; }
.chart #risk-2, #risk-3 { width: 60%; }
.chart #risk-4 { width: 58.6%; }
.chart #risk-5 { width: 59.2%; }*/
/*******************************
===== 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;
}
/* set widths for each bar based on percentages for each year */
.chart #risk-1, #risk-6 { height: 64%; }
.chart #risk-2, #risk-3 { height: 60%; }
.chart #risk-4 { height: 58.6%; }
.chart #risk-5 { height: 59.2%; }
}
#media (min-width: 1000px) {
}
I've reviewed my code over and over - I'm stuck! Thanks in advance.

Answer 1

You have an error in your CSS.
You have:
vertical align: bottom
You need a hypen:
.chart li {
vertical-align:bottom
}

Answer 2

You should add vertical-align: bottom; to the .bar class.
Please note the dash between vertical and align
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;
vertical-align: bottom;
}
.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;
/*font-family: FSHumanaLight */
letter-spacing: 1px;
opacity: .6;
width: 100%;
color: #fff;
}
/* set widths for each bar based on percentages for each year
.chart #risk-1, #risk-6 { width: 64%; }
.chart #risk-2, #risk-3 { width: 60%; }
.chart #risk-4 { width: 58.6%; }
.chart #risk-5 { width: 59.2%; }*/
/*******************************
===== 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;
}
/* set widths for each bar based on percentages for each year */
.chart #risk-1,
#risk-6 {
height: 64%;
}
.chart #risk-2,
#risk-3 {
height: 60%;
}
.chart #risk-4 {
height: 58.6%;
}
.chart #risk-5 {
height: 59.2%;
}
}
#media (min-width: 1000px) {}
<h1>Bold Goal Measures</h1>
<figure>
<!--<h2>Unhealthy Days</h2>-->
<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>