How to modify responsive timeline? - css

Question

http://codepen.io/kjohnson/pen/azBvaE
My friend and I are thinking of using that timeline in our website. But the problem is we've 5 sections that needs to be added to timeline, whereas the original timeline have only 3 sections.
I've tried to add two more sections to that code, but it's losing its shape and responsiveness.
Is it possible to extend that timeline and maintain its responsiveness?
HTML
<!-- STEPS -->
<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
$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: 16.65%;
margin-right: 16.65%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three {
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: 33%;
margin-top: -50px;
}
}
.steps-one,
.steps-two {
#media screen and (max-width: $break-point) {
padding-bottom: 40px;
}
}
.steps-one {
#media screen and (min-width: $break-point) {
margin-left: -16.65%;
margin-right: 16.65%;
}
}
.steps-two {
}
.steps-three {
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
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: $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;
}
}

Answer 1

If you a novice I'd recommend you LEARN first. Copy templates/snippets is good to save your time when you know what you are doing.
I found a perfect tutorial for you here
Just to emphasize that's my opinion, I hope it helps in a certain way..
EDIT: If still want to develop in that way here's a codepen snippet with a fully responsive horizontal timeline. Just have to put more <li> inside the <ul>