Create a responsive timeline with HTML and CSS

In this snippet, we will learn how to create a responsive timeline with HTML and CSS.

Step 1, add meta tag to header:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
Copy this code

This is meta tag for responsive handle

Step 2, Add HTML code below to your HTML file:

 <div class="timeline">
		<div class="timeline-item left">
			<div class="content">
				<h2>2019</h2>
				<p>Something happened in 2019</p>
			</div>
		</div>
		<div class="timeline-item right">
			<div class="content">
				<h2>2018</h2>
				<p>Something happened in 2018</p>
			</div>
		</div>
		<div class="timeline-item left">
			<div class="content">
				<h2>2017</h2>
				<p>Something happened in 2017</p>
			</div>
		</div>
		<div class="timeline-item right">
			<div class="content">
				<h2>2016</h2>
				<p>Something happened in 2016</p>
			</div>
		</div>
		<div class="timeline-item left">
			<div class="content">
				<h2>2015</h2>
				<p>Something happened in 2015</p>
			</div>
		</div>
	</div>
Copy this code

The elements with class name "timeline" is a container wrapped for all timeline element inside.

Step 3, Copy and paste this CSS code into your CSS file:

                  * {
			  box-sizing: border-box;
		  }

		  body {
			  background-color: #6e97ea;
			  font-family: Helvetica, sans-serif;
		  }

		  .timeline {
			  position: relative;
			  max-width: 1200px;
			  margin: 0 auto;
		  }

		  .timeline::after {
			  content: "";
			  position: absolute;
			  width: 3px;
			  background-color: white;
			  top: 0;
			  bottom: 0;
			  left: 50%;
			  margin-left: -2px;
		  }

		  .timeline-item {
			  padding: 10px 40px;
			  position: relative;
			  background-color: inherit;
			  width: 50%;
		  }

		  .timeline-item::after {
  			content: "";
  			position: absolute;
  			width: 15px;
  			height: 15px;
  			right: -9px;
  			background-color: #4caf50;
  			border: 2px solid #fff;
  			top: 22px;
  			border-radius: 50%;
  			z-index: 1;
		  }

		  .left {
  			left: 0;
		  }

		  .right {
  			left: 50%;
		  }

		  .left::before {
  			content: " ";
  			height: 0;
  			position: absolute;
  			top: 22px;
  			width: 0;
  			z-index: 1;
 			 right: 30px;
			  border: medium solid white;
			  border-width: 10px 0 10px 10px;
			  border-color: transparent transparent transparent white;
		  }

		  .right::before {
  			content: " ";
  			height: 0;
 			 position: absolute;
 			 top: 22px;
 			 width: 0;
 			 z-index: 1;
 			 left: 30px;
 			 border: medium solid white;
 			 border-width: 10px 10px 10px 0;
  			border-color: transparent white transparent transparent;
		  }

		  .right::after {
			  left: -10px;
		  }

		  .content {
  			padding: 20px 30px;
  			background-color: white;
 			 position: relative;
			  border-radius: 6px;
		  }

		  /* Responsive on screens less than 600px wide */
		  @media screen and (max-width: 600px) {
  			.timeline::after {
    				left: 31px;
			  }

			  .timeline-item {
    				width: 100%;
				    padding-left: 70px;
   				 padding-right: 25px;
 			 }

 			 .timeline-item::before {
   				 left: 60px;
   				 border: medium solid white;
  				  border-width: 10px 10px 10px 0;
  				  border-color: transparent white transparent transparent;
  			}

			  .left::after,
			  .right::after {
 				   left: 21px;
 			 }

 			 .right {
 				   left: 0%;
 			 }
		  }
Copy this code

CSS code above included responsive for screens less than 600px wide.

You can resize browser to view responsive timeline in result below: