Current Timeline Implementation is based on the screen size of 3800px ish width. I used display: grid and display: flex to achieve the timeline look. I also used ::after to create the vertical line. So the lines and the timeline can be easily readjust when using media queries. However, for the text box, i have to position each one manually each time when screen size changes, which is really painful. Is there another way to implement this so that it can more responsive to change in screen size? AkA is there a better, more efficient way to design this section? [This is from a beginner in web dev]
Should look like this: https://in.pinterest.com/pin/885027764250334439/
HTML File
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href="s.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Sacramento&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Dancing+Script&family=Libre+Baskerville&family=Montserrat:wght@100;400&display=swap" rel="stylesheet">
<title>Personal Website</title>
</head>
<body>
<div id="experience">
<h2>Heading Title</h2>
<div class="timeline">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="time-graphic"><img src="img/school.png" alt="school"></div>
<div class="time-graphic"><img src="img/work.png" alt="briefcase"></div>
<div class="time-graphic"><img src="img/question.png" alt="briefcase"></div>
<div class="time-graphic"><img src="img/labtop.png" alt="labtop"></div>
<div class="date" id="orange">2017</div>
<div class="date" id="yellow">2020</div>
<div class="date" id="lightblue">2022</div>
<div class="date" id="pink">2023</div>
<div class="date" id="green">2024</div>
</div>
<div class="time-content" id="orange2">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
<div class="time-content" id="yellow2">
<h3>Title Two</h3>
<p>
Perpetuum, cras urgentis integer, A esse dis originem id facer si gestarum sequela.
Ac E personarum sint ad belgos quas, S fecerunt si e Sem Malevolorum risus,
eorum eu vicissitudo ullo zzril-nec generositas eget diam.
</p>
</div>
<div class="time-content" id="lightblue2">
<h3>Title Three</h3>
<p>
Nunc li unde typi at optio se elit-ullo deorum optio temporibus, E memento ut caduca potissimum nunc diuturna praesentiam.
Minim o nunc me p recusandae ut v sociosqu malevoli, eodem S facunda praeteritis lius incidunt sed polisniinus dignus,
se praevcnire dis exaudire lius veneta significat eu auctor.
</p>
</div>
<div class="time-content" id="pink2">
<h3>Title Four</h3>
<p>
Ac ea genere arcu in est resipiscet odit, D'se lorem qui amet in ac victualia iure ac praeiudicata.
Te alias clari cras wisi abeundum dulcedo negabat modi electionem.
Lategue odit partibus vel arendom arcu dis saepe cum se noviciam, novembris ipsum 00% te ad cum.
</p>
</div>
<div class="time-content" id="green2">
<h3>Title Five</h3>
<p> Meruerunt, visccra hic nec in 8023, P vero dui absolute si morsum se o rem haeres odio,
confinia unde mi ac officii vivamus: Hac Spectaculum.
</p>
</div>
</div>
</body>
</html>
CSS File
/*experience*/
#experience {
height: 100vh;
}
#experience h2 {
color: #7C93C3;
font-size: 50px;
font-family: "Montserrat", sans-serif;
margin-left: 100px;
}
.timeline {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
width: 1500px;
margin-left: 10%;
}
.time-graphic img {
height: 50px;
}
.time-graphic , .date{
display: flex;
justify-content: center;
}
.date {
font-size: 50px;
color: white;
font-family: "Montserrat", sans-serif;
}
#orange {
background-color: rgba(247,138,55,255);
position: relative;
}
#green {
background-color: #82a443;
position: relative;
}
#pink {
background-color: #e5567f;
position: relative;
}
#lightblue {
background-color: #43c3d0;
position: relative;
}
#yellow {
background-color: #e9c43b;
position: relative;
}
#orange::after{
content: '';
position: absolute;
width: 6px;
height: 300%;
background-color: rgba(247,138,55,255);
top: 60px;
}
#yellow::after {
content: '';
position: absolute;
width: 6px;
height: 700%;
background-color: #e9c43b;
top: 60px;
}
#lightblue::after {
content: '';
position: absolute;
width: 6px;
height: 300%;
background-color: #43c3d0;
top: 60px;
}
#pink::after {
content: '';
position: absolute;
width: 6px;
height: 700%;
background-color: #e5567f;
top: 60px;
}
#green::after {
content: '';
position: absolute;
width: 6px;
height: 300%;
background-color: #82a443;
top: 60px;
}
.time-content{
width: 20%;
padding: 20px;
border-radius: 25px;
font-family: "Montserrat", sans-serif;
display: inline-block;
}
.time-content p{
font-size: 15px;
}
#orange2 {
background-color: rgba(247,138,55,255);
position: relative;
top: -50px;
left: 120px;
}
#green2 {
background-color: #82a443;
position: relative;
left: 1320px;
top: -250px;
}
#pink2 {
background-color: #e5567f;
position: relative;
top: 350px;
right: 250px;
}
#lightblue2 {
background-color: #43c3d0;
position: relative;
top: -20px;
left: -120px;
}
#yellow2 {
background-color: #e9c43b;
position: relative;
top: 250px;
}
[1]: https://i.sstatic.net/woRCs.png
this might be the solution you are looking for. I've rearranged the HTML (and renamed the classes – feel free to rename them back), so now the year class represents a year with the image, date and description.
Then I put them into one row and styled them using flexbox. When the screen size is lower than 1000px, every year is put into separate row and the description width is increased to 60 % of the screen size.
*, ::before, ::after{
box-sizing: border-box;
}
#experience {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
#experience h2 {
color: #7C93C3;
font-size: 50px;
margin-left: 100px;
}
.timeline{
display: flex; /* get every year div inline and center */
justify-content: center;
}
.year{
display: flex;
flex-direction: column;
align-items: center;
width: 200px; /* set your width */
}
.time-graphic{
height: 50px;
}
.date{
width: 200px; /* must be same as .year width */
text-align: center;
font-size: 50px;
padding: 10px;
color: white;
}
.date::after{
content: '';
display: flex;
position: absolute;
width: 5px;
margin: 0 calc(100px - 10px - 2.5px);
margin-top: 10px;
height: 400px;
}
.year:nth-child(even) .date::after{
height: 75px; /* for every even element smaller size */
}
.time-content{
box-sizing: content-box;
text-align: center;
margin-top: 400px; /* same as .date::after height */
padding: 20px;
border-radius: 25px;
width: 250px;
}
.year:nth-child(even) .time-content{
margin-top: 75px;
}
@media screen and (max-width: 1000px){
#experience h2{
margin: 20px 0; /* delete margin-left and center the heading */
text-align: center;
}
.timeline{
flex-direction: column; /* make years go into a column */
}
.year{
align-self: center;
margin-bottom: 20px;
}
.date::after{
height: 100px;
}
.time-content{
margin-top: 100px;
width: 60vw;
}
}
/* declare colors */
.orange, .orange::after{
background: rgba(247,138,55,255);
}
.green, .green::after{
background: #82a443;
}
.pink, .pink::after{
background: #e5567f;
}
.lightblue, .lightblue::after{
background: #43c3d0;
}
.yellow, .yellow::after{
background: #e9c43b;
}<head>
<link rel = "stylesheet" type = "text/css" href="s.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Dancing+Script&family=Libre+Baskerville&family=Montserrat:wght@100;400&display=swap" rel="stylesheet">
</head>
<body>
<div id="experience">
<h2>Heading Title</h2>
<div class="timeline">
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date orange">2017</div>
<div class="time-content orange">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date green">2020</div>
<div class="time-content green">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date pink">2022</div>
<div class="time-content pink">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date lightblue">2023</div>
<div class="time-content lightblue">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date yellow">2024</div>
<div class="time-content yellow">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
</div>
</div>
</body>