After tackling some challenges in previous forums to fix my responsive timeline, I resorted to copying code from codepen.io due to my laziness to create one from scratch. The complexity of creating a timeline also played a role in my decision.
My current issue is Why does the left-column timeline disappear when the browser is resized to tablet/mobile size? Only the right-column remains visible after resizing the browser.
Feel free to run the code snippet and view it in full-page mode while resizing the browser to understand the problem better.
/* ==================== Timeline ==================== */
.container {
width: 80%;
padding: 50px 0;
margin: 50px auto;
position: relative;
overflow: hidden;
font-family: sans-serif;
}
.container:before {
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background: #CCD1D9;
z-index: 1;
}
.timeline-block {
width: -webkit-calc(50% + 8px);
width: -moz-calc(50% + 8px);
width: calc(50% + 8px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
}
.timeline-block-right {
float: right;
}
.timeline-block-left {
float: left;
display: flex;
flex-direction: row-reverse;
}
.marker {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #F5F7FA;
background: #4FC1E9;
margin-top: 10px;
z-index: 9999;
}
.timeline-content {
width: 95%;
padding: 0 15px;
color: #666;
}
.timeline-content h3 {
margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500;
}
.timeline-content span {
font-size: 15px;
color: #a4a4a4;
}
.timeline-content p {
font-size: 14px;
line-height: 1.5em;
word-spacing: 1px;
color: #888;
}
/* ==================== Timeline Media Queries ==================== */
@media screen and (max-width: 800px) {
.container:before {
left: 8px;
width: 2px;
}
.timeline-block {
width: 100%;
margin-bottom: 30px;
}
.timeline-block-right {
float: none;
}
.timeline-block-left {
float: none;
text-align: left;
display: none;
flex-direction: none;
}
}<div class="container">
<div class="timeline-block timeline-block-right">
<div class="marker"></div>
<div class="timeline-content">
<h3>Main Title</h3>
<span>Year - year</span>
<p>
<span style="font-size: 16px; color: #666666;">Company name</span>
<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
</p>
</div>
</div>
<div class="timeline-block timeline-block-left">
<div class="marker"></div>
<div class="timeline-content">
<h3>Main Title Number 2</h3>
<span>Year - year</span>
<p>
<span style="font-size: 16px; color: #666666;">Company name</span>
<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
</p>
</div>
</div>
<div class="timeline-block timeline-block-right">
<div class="marker"></div>
<div class="timeline-content">
<h3>Main Title Number 3</h3>
<span>Year - year</span>
<p>
<span style="font-size: 16px; color: #666666;">Company name</span>
<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
</p>
</div>
</div>
<div class="timeline-block timeline-block-left">
<div class="marker"></div>
<div class="timeline-content">
<h3>Main Title Number 4</h3>
<span>Year - year</span>
<p>
<span style="font-size: 16px; color: #666666;">Company name</span>
<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
</p>
</div>
</div>
<div class="timeline-block timeline-block-right">
<div class="marker"></div>
<div class="timeline-content">
<h3>Main Title Number 5</h3>
<span>Year - year</span>
<p>
<span style="font-size: 16px; color: #666666;">Company name</span>
<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
</p>
</div>
</div>
</div>
<!-- End of container div for the responsive timelime -->