Responsive Timeline - html

Question

I need a responsive timeline with labels under each number (JSFiddle Example):
<ul>
<li>1</li>
<li>2</li>
<li class="active">3</li>
<li>4</li>
</ul>
And the CSS is the following:
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before{
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: dodgerblue;
z-index: -1;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active ~ li {
background: lightblue;
}
.active ~ li::before {
background: lightblue;
}
How can I:
1. Make it responsive so the distance between circles change on browser resizing?
2. How to add a label under each circle?

Answer 1

Have a look at the jsfiddle i've done for you excuse me if i understood anything wrong ask me if you need anything.
https://jsfiddle.net/Lvxctyq1/
HTML
<section class="section intro">
<div class="container">
<h1>TIMELINE →</h1>
</div>
</section>
<section class="timeline">
<ol>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li>
<div>
<info>1943</info> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
</div>
</li>
<li></li>
</ol>
</section>
CSS
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
background: transparent;
border: none;
cursor: pointer;
outline: none;
}
body {
font: normal 16px/1.5 "Helvetica Neue", sans-serif;
background: #456990;
color: #fff;
}
/* .section SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
background: #F45B69;
padding: 50px 0;
}
.section .container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.section h1 {
font-size: 2.5rem;
}
.section h2 {
font-size: 1.3rem;
}
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline {
white-space: nowrap;
overflow-x: hidden;
}
.timeline ol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}
.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 160px;
height: 3px;
background: #fff;
}
.timeline ol li:last-child {
width: 280px;
}
.timeline ol li:not(:first-child) {
margin-left: 14px;
}
.timeline ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(100% + 1px);
bottom: 0;
width: 12px;
height: 12px;
transform: translateY(-50%);
border-radius: 50%;
background: #F45B69;
}
.timeline ol li div {
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 1rem;
white-space: normal;
color: black;
background: white;
}
.timeline ol li div::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
.timeline ol li:nth-child(odd) div {
top: -16px;
transform: translateY(-100%);
}
.timeline ol li:nth-child(odd) div::before {
top: 100%;
border-width: 8px 8px 0 0;
border-color: white transparent transparent transparent;
}
.timeline ol li:nth-child(even) div {
top: calc(100% + 16px);
}
.timeline ol li:nth-child(even) div::before {
top: -8px;
border-width: 8px 0 0 8px;
border-color: transparent transparent transparent white;
}
.timeline info {
display: block;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 8px;
}
/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media screen and (max-width: 599px) {
.timeline ol,
.timeline ol li {
width: auto;
}
.timeline ol {
padding: 0;
transform: none !important;
}
.timeline ol li {
display: block;
height: auto;
background: transparent;
}
.timeline ol li:first-child {
margin-top: 25px;
}
.timeline ol li:not(:first-child) {
margin-left: auto;
}
.timeline ol li div {
width: 94%;
height: auto !important;
margin: 0 auto 25px;
}
.timeline ol li div {
position: static;
}
.timeline ol li:nth-child(odd) div {
transform: none;
}
.timeline ol li:nth-child(odd) div::before,
.timeline ol li:nth-child(even) div::before {
left: 50%;
top: 100%;
transform: translateX(-50%);
border: none;
border-left: 1px solid white;
height: 25px;
}

Answer 2

#Baransel gave you a solution, but to answer your questions...
How can I:
1. Make it responsive so the distance between circles change on browser resizing?
Put margin or padding in the CSS for the li or as the example above in the div within the li.
How to add a label under each circle?
Either in the html as #Baransel has done through the use of an tag, or appending it via the ::after attribute in the CSS content field. Likely putting the label actually in the HTML is the best choice for accessibility.