Hey there! I've successfully created a custom timeline using flexbox, but I'm encountering an issue on smaller screens. As the window size decreases, the flex items start to overlap. Is there a way you can assist me in adding some space without disrupting the border that forms the timeline?
:root{
--image-url: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80";
}
*,
*::before,
*::after{
margin : 0;
padding: 0;
box-sizing: inherit;
}
body{
box-sizing: content-box;
font-size: 62.5%;
font-family: 'Zen Kaku Gothic Antique', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height : 100vh;
background-image:
linear-gradient(
to right top,
rgba(13, 13, 13, .75),
rgba(13, 13, 13, 1)
),
url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.timeline-row{
font-size: 1.2rem;
display: flex;
min-width: 25%;
min-height: 5rem;
color: #fff;
}
.timeline-item{
flex:1;
display: flex;
align-items: center;
&--date{
border-right: 1px solid currentColor;
justify-content: flex-end;
}
&--content{
border-left: 1px solid currentColor;
position: relative;
justify-content: center;
&::before{
content: "";
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color:currentColor;
position: absolute;
top: 50%;
left: -.55rem;
transform: translateY(-50%);
}
}
}
.row-content{
margin: .5rem 2rem;
padding: .75rem;
background-color: rgba(67, 85, 115, .35);
border-radius: 15px;
}<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300&family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap" rel="stylesheet">
<div class="container">
<div class="timeline-row">
<div class="timeline-item timeline-item--date">
<div class="row-content">2019</div>
</div>
<div class="timeline-item timeline-item--content">
<div class="row-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel posuere magna. Morbi molestie odio eget quam rutrum, non volutpat dolor pharetra. Aliquam pretium condimentum est eu fermentum. Nulla dapibus tellus in leo aliquet aliquet. Vestibulum tempor est in.</div>
</div>
</div>
<div class="timeline-row">
<div class="timeline-item timeline-item--date">
<div class="row-content">2020</div>
</div>
<div class="timeline-item timeline-item--content">
<div class="row-content">Quisque ut justo est. Donec pulvinar viverra neque a cursus. Etiam a nunc sed dui posuere facilisis. Phasellus ut est rutrum, dignissim lorem ac, maximus mauris. Phasellus consequat lorem non urna luctus, in efficitur justo sagittis. Fusce iaculis congue rutrum. Sed vehicula.</div>
</div>
</div>
<div class="timeline-row">
<div class="timeline-item timeline-item--date">
<div class="row-content">2021</div>
</div>
<div class="timeline-item timeline-item--content">
<div class="row-content">Nunc et volutpat felis, ac rutrum turpis. Nullam id sollicitudin eros. Mauris dictum nibh in lorem pharetra, id feugiat tortor tempus. Integer gravida erat nec odio lobortis fringilla. Duis at auctor tortor, eget consectetur risus. Vivamus sit amet hendrerit metus, at rutrum magna.</div>
</div>
</div>
</div>