How to add additional sections to this timeline? - html

Question

I want to put a timeline in my website which I found on codepen.
The problem is, it has only three sections(semantic, relative, contained), I tried to add another two sections but the layout gets disrupted and loses responsiveness.
Could anyone guide me in creating extra sections in that timeline without loosing it's 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 -->
</section>
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

Your CSS needs to be modified to include more divs within the same width. Now since the divs are manually assigned spacing between them rather than a dynamic approach, you can experimentally change the width and margin properties and including .step-four & .step-five in the css as well. I've included one additional div for example. You can try out adding more in this way.
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: 0px;
}
#media screen and (min-width: $break-point) {
border-top: 2px solid $brand-primary;
padding-top: 20px;
margin-top: 40px;
margin-left: 10%;
margin-right: 10%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five{
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: 25%;
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: -12%;
margin-right: 12%;
}
}
.steps-two {}
.steps-three,.step-four{
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
margin-left: 10%;
margin-right: -10%;
float:right;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
#media screen and (max-width: $break-point) {
float: left;
margin-right: 10px;
}
}
.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;
}
}
Depending on the number of divs, the width property of the following can be changed.
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five{
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: 25%;
margin-top: -50px;
}
}
For Example
3 divs - 33%
4 divs - 25%
5 divs - 20%
and so on