Is the CSS3 bar chart flipped?

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!

htmlcssbar-chart

Answer №1

There seems to be a mistake in your CSS code.

Your current code:

vertical align: bottom

You should use a hyphen instead: 

.chart li {
   vertical-align:bottom
}

Answer №2

It is recommended to include vertical-align: bottom; in the .bar class.

Pay attention to 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with my phonegap app not allowing me to open any

I've just embarked on creating my first phonegap application using an HTML5 mobile website template. After deploying it, I noticed that the external links are not working within the app. Clicking on a link doesn't seem to do anything. To addres ...

androidhtmlcordovaphonegap-plugins

Analyzing the current time against a user-inputted time using Javascript

Looking at this html and javascript code, the goal is to compare an input time with the current time. If the input time is less than 2 hours, "Less time" should be displayed in the label; if it's more than 2 hours, then "sufficient time" should appear ...

javascripthtmlfunctiontimecompare

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

javascriptphphtmlformsvalidation

JS glitch leading to oversized window dimensions - Issue with dropdown menu

I recently integrated a dropdown into my website using Foundation CSS. To see the dropdown in action, you can login with the credentials provided (username: stackoverflow password: testtest) on . However, I noticed that when logged in, the page on the rig ...

javascriptcss

The switch statement is not functioning properly when the button is pressed

I am trying to trigger an alert inside a switch statement when I click a button, but for some reason, it is not working. Even if I simply have an alert in the previous function, there is no output on my website. What could be causing this issue? Here is ...

javascripthtml

A step-by-step guide on integrating a Django template tag and HTML element into an HTML page using Javascript

Is there a safe way to insert HTML that includes Django template tags using JavaScript in my project? For instance, if my template contains the following code: <div id="some-element"> <span id="my-tag">{{ my_data }}</sp ...

javascripthtmldjango

Aligning two images vertically using the display: table-cell property

I'm trying to align two images vertically using CSS' display: table-cell property, but it doesn't seem to be working even after specifying the height. <div style='display: table;height:500px'> <div style=' displa ...

csslayout

Different option to employ instead of utilizing the <br> tag on multiple lines

Struggling with the tedious task of copying and pasting code snippets on my websites. Is there a simpler way to achieve this? I am looking for an option to easily insert <br> at the end of each line. Currently, I am manually adding <br> at th ...

phphtmlcss

Incorporating stick-to-top scroll functionality using AngularJS and ng

I am trying to implement a 'sticky' scroll on dynamic content. My current working example can be found here. It seems to be working, but I encounter a small 'flicker' when new items are appended. This issue seems to be related to the se ...

javascripthtmlcssangularjs

Unusual behavior exhibited by ng-if within a widget

Hey there, seeking some assistance here. I'm currently making edits to a widget and within the client HTML code, I've come across two ng-if statements (the first one was already there, I added the second). <li> <a ng-if="data.closed ...

htmlangularservicenow-client-scripts

What is the best way to incorporate two range sliders on a single webpage?

I recently started using rangeslider.js on my webpage. I wanted to convert two input fields into range sliders, so I began by converting one successfully. Initially, the HTML code looked like this: <div class="rangeslider-wrap"> <input type=" ...

javascriptjqueryhtmlresponsiverangeslider

Tips for scrolling a div that has too much content within a webpage

Is there a method to manipulate the scrollbar within a div on a webpage? Specifically, I am attempting to automate scrolling up and down on an Instagram post like . However, since the scrollbar may be hidden using CSS properties, detecting it can be challe ...

javacssseleniumscrollbaroverflow

The element is not occupying the full width within the div container

I'm working with a div that contains some elements. My goal is to have these elements span the entire width of the container div. .container { height: 100px; width: 100px; display: flex; flex-direction: column; overflow: scroll; borde ...

htmlcss

Ensure that the HTML image and text are positioned side by side, with the text appearing alongside the picture rather than below

Looking for a way to keep the text aligned to the right of an image, regardless of length? Check out this exercise: https://www.example.com/css/exercise-1 Is there a method to maintain the text layout next to an image while accommodating varying amounts o ...

htmlcss

Guide to displaying a task within a table cell after a user submits the form

<?php $servername = "localhost"; $username = "u749668864_PandaHost"; $password = "Effy1234"; $dbname = "u749668864_PandaHost"; $q = $_REQUEST["task"]; $task = $q; echo $task; $conn->close(); ?> Exploring the world of ajax has left me scratching ...

javascriptphphtmljqueryajax

Position the div alignment to the top within the table cell

I'm having trouble aligning the div under the header to the right. Here is my HTML code and a photo for reference: HTML Code: <td> <div class="schedule-content"> <div class="timestamp& ...

htmlcss

Steps to display the Sidebar on top of the main information page

One unique feature of my website is the FiltersSideBar located on the left side of the page. It contains various filters to refine search results. To optimize user experience, I implemented a function that hides the sidebar at specific browser window size ...

javascriptcssreactjssidebar

I seem to be overlooking something. The calculation is not displaying in the designated field

Having trouble with my area calculator - the area field is not updating as expected when I enter numbers in each field. Any advice on what might be missing? function calculateArea() { var form = document.getElementById("calc"); var sLength = parseFl ...

javascripthtmlcalculatorarea

Creating a mandatory 'Select' dropdown field in Vue.js

Hello, I am a beginner in VueJS and I am trying to make a select element from a drop-down list required. I attempted to add the required attribute as shown in the code below. Any suggestions on how to achieve this? Thanks. <v-select ...

javascripthtmlvue.js

Centered inline-block divisions

I've been coding for a number of years now, but I've recently started learning CSS. I'm currently facing an issue and need some help. I want to place two divs next to each other and center them. Here's the code I'm using: HTML: & ...

htmlcss