I would like to make this responsive timeline to have 6 steps - html

Question

I need 6 steps. I tried for hours, I just can't make it work. I'm pretty sure it's not that hard for someone more experienced. I've had several forks but all are dead end.
Could you help me out please?
http://codepen.io/kjohnson/pen/azBvaE
HTML:
<section id="Steps" class="steps-section">
<h2 class="steps-header">
Responsive Semantic Timeline
</h2>
<div class="steps-timeline">
<div class="steps-one">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Semantic
</h3>
<p class="steps-description">
The timeline is created using negative margins and a top border.
</p>
</div>
<div class="steps-two">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Relative
</h3>
<p class="steps-description">
All elements are positioned realtive to the parent. No absolute positioning.
</p>
</div>
<div class="steps-three">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Contained
</h3>
<p class="steps-description">
The timeline does not extend past the first and last elements.
</p>
</div>
</div><!-- /.steps-timeline -->
CSS:
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
.section-header, .steps-header, .steps-name {
color: #3498DB;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(255, 0, 0, 0);
}
#media screen and (max-width: 500px) {
.steps-timeline {
border-left: 2px solid #3498DB;
margin-left: 25px;
}
}
#media screen and (min-width: 500px) {
.steps-timeline {
border-top: 2px solid #3498DB;
padding-top: 20px;
margin-top: 40px;
margin-left: 16.65%;
margin-right: 16.65%;
}
}
.steps-timeline:after {
content: "";
display: table;
clear: both;
}
.steps-one,
.steps-two,
.steps-three {
outline: 1px dashed rgba(0, 128, 0, 0);
}
#media screen and (max-width: 500px) {
.steps-one,
.steps-two,
.steps-three {
margin-left: -25px;
}
}
#media screen and (min-width: 500px) {
.steps-one,
.steps-two,
.steps-three {
float: left;
width: 33%;
margin-top: -50px;
}
}
#media screen and (max-width: 500px) {
.steps-one,
.steps-two {
padding-bottom: 40px;
}
}
#media screen and (min-width: 500px) {
.steps-one {
margin-left: -16.65%;
margin-right: 16.65%;
}
}
#media screen and (max-width: 500px) {
.steps-three {
margin-bottom: -100%;
}
}
#media screen and (min-width: 500px) {
.steps-three {
margin-left: 16.65%;
margin-right: -16.65%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
}
#media screen and (max-width: 500px) {
.steps-img {
float: left;
margin-right: 20px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
#media screen and (min-width: 500px) {
.steps-name {
text-align: center;
}
}
.steps-description {
overflow: hidden;
}
#media screen and (min-width: 500px) {
.steps-description {
text-align: center;
}
}

Answer 1

I assume you want something like this?
http://codepen.io/adamk22/pen/LGQQKz
$outline-width: 0;
$break-point: 500px;
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
$gray-base: #999999;
$brand-primary: #3498DB; //Zen Blue
.section-header {
color: $brand-primary;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
#extend .section-header;
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(red, $outline-width);
#media screen and (max-width: $break-point) {
border-left: 2px solid $brand-primary;
margin-left: 25px;
}
#media screen and (min-width: $break-point) {
border-top: 2px solid $brand-primary;
padding-top: 20px;
margin-top: 40px;
margin-left: 8%;
margin-right: 8%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five,
.steps-six{
outline: 1px dashed rgba(green, $outline-width);
#media screen and (max-width: $break-point) {
margin-left: -25px;
}
#media screen and (min-width: $break-point) {
float: left;
width: 12%;
margin-top: -50px;
}
}
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five,
.steps-six{
#media screen and (max-width: $break-point) {
padding-bottom: 40px;
}
}
.steps-one {
#media screen and (min-width: $break-point) {
margin-left: -8%;
margin-right: 8%;
}
}
.steps-two {
#media screen and (min-width: $break-point) {
margin-right: 8%;
}
}
.steps-three {
#media screen and (min-width: $break-point) {
margin-right: 8%;
}
}
.steps-four {
#media screen and (min-width: $break-point) {
margin-right: 8%;
}
}
.steps-five {
}
.steps-six {
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
margin-left: 8%;
margin-right: -8%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
#media screen and (max-width: $break-point) {
float: left;
margin-right: 20px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
.steps-name {
#extend .section-header;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
.steps-description {
overflow: hidden;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
Most of the changes require you to change the CSS, especially the media queries as you can see in the pen.