title: How do I make this CSS progress tracker responsive?
body: <p>How can I make this CSS progress tracker responsive?</p>
  
  <p>I want the "steps" to stack on top of each other when viewed on a screen that is too small to fit them horizontally.</p>
  
  <p>Code snippet included below, or jsfiddle here if you prefer:<a href="https://jsfiddle.net/yr6kwzcv/" rel="nofollow">https://jsfiddle.net/yr6kwzcv/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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 &gt; span {
    display: block;
  
    color: #999;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .track-progress li.done &gt; span {
    color: #666;
    background-color: #ccc;
  }
  
  /* add the arrows */
  .track-progress li &gt; span:after,
  .track-progress li &gt; 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 &gt; span:after {
    top: -5px;
    z-index: 1;
    border-left-color: white;
    border-width: 20px;
  }
  
  .track-progress li &gt; 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 &gt; span:before {
    border-left-color: #ccc;
  }
  
  .track-progress li:first-child &gt; span:after,
  .track-progress li:first-child &gt; 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;ol class="track-progress" data-steps="3"&gt;
     &lt;li class="done"&gt;
       &lt;span&gt;Site Information&lt;/span&gt;
       &lt;i&gt;&lt;/i&gt;
     &lt;/li&gt;&lt;!--
  --&gt;&lt;li class="done"&gt;
       &lt;span&gt;Data Source&lt;/span&gt;
     &lt;/li&gt;&lt;!--
  --&gt;&lt;li&gt;
       &lt;span&gt;Final Details&lt;/span&gt;
       &lt;i&gt;&lt;/i&gt;
     &lt;/li&gt;
   &lt;/ol&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the source of the code snippet I recreated above: <a href="https://coderwall.com/p/-7trcg/simple-css-only-wizard-progress-tracker" rel="nofollow">https://coderwall.com/p/-7trcg/simple-css-only-wizard-progress-tracker</a></p>