How do I make this CSS progress tracker responsive? - html

Question

How can I make this CSS progress tracker responsive?
I want the "steps" to stack on top of each other when viewed on a screen that is too small to fit them horizontally.
Code snippet included below, or jsfiddle here if you prefer:https://jsfiddle.net/yr6kwzcv/
/* Resets the ordered list styles and makes the list elements be displayed in a single line */
.track-progress {
margin: 0;
padding: 0;
overflow: hidden;
}
.track-progress li {
list-style-type: none;
display: inline-block;
position: relative;
margin: 0;
padding: 0;
text-align: center;
line-height: 30px;
height: 30px;
background-color: #f0f0f0;
}
/* Make it occupy all the available width */
.track-progress[data-steps="3"] li { width: 33%; }
.track-progress[data-steps="4"] li { width: 25%; }
.track-progress[data-steps="5"] li { width: 20%; }
/* Adds a "done" class to represent the progress */
.track-progress li > span {
display: block;
color: #999;
font-weight: bold;
text-transform: uppercase;
}
.track-progress li.done > span {
color: #666;
background-color: #ccc;
}
/* add the arrows */
.track-progress li > span:after,
.track-progress li > span:before {
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: #f0f0f0;
border-width: 15px;
}
.track-progress li > span:after {
top: -5px;
z-index: 1;
border-left-color: white;
border-width: 20px;
}
.track-progress li > span:before {
z-index: 2;
}
/* Make arrows match the color of the previous step and remove arrow from first element */
.track-progress li.done + li > span:before {
border-left-color: #ccc;
}
.track-progress li:first-child > span:after,
.track-progress li:first-child > span:before {
display: none;
}
/* Adds arrows appearance to the start and end */
.track-progress li:first-child i,
.track-progress li:last-child i {
display: block;
height: 0;
width: 0;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: white;
border-width: 15px;
}
.track-progress li:last-child i {
left: auto;
right: -15px;
border-left-color: transparent;
border-top-color: white;
border-bottom-color: white;
}
<ol class="track-progress" data-steps="3">
<li class="done">
<span>Site Information</span>
<i></i>
</li><!--
--><li class="done">
<span>Data Source</span>
</li><!--
--><li>
<span>Final Details</span>
<i></i>
</li>
</ol>
Here is the source of the code snippet I recreated above: https://coderwall.com/p/-7trcg/simple-css-only-wizard-progress-tracker