Почему при масштабировании браузерного окна элементы .point съезжают с вертикальной прямой по центру .timeline_list:before? Ширина контейнера и обёртки в %, left и right у .point тоже в % (в px тот же эффект). В таких ситуациях тоже media queries следует применять?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#timeline {
width: 100%;
max-width: 1100px;
padding: 5px;
border: 1px solid black;
margin: 0 auto;
}
.container {
width: 70%;
margin: 0 auto;
}
.timeline_list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
}
.timeline_list:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: #000;
left: calc(50% - 1px);
}
.timeline_item {
width: 48%;
list-style-type: none;
padding: 10px;
margin-bottom: 10px;
position: relative;
height: min-content;
}
.timeline_item--left {
color: red;
border: 1px solid red;
}
.timeline_item--right {
color: green;
border: 1px solid green;
margin-top: 30px;
}
.timeline_item>.point {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
}
.timeline_item--left>.point {
top: 0;
/* right: -24px; */
right: -6.6%;
background-color: red;
}
.timeline_item--right>.point {
top: 0;
/* left: 24px; */
left: -6.6%;
background-color: green;
}
<main id="timeline">
<div class="container">
<ul class="timeline_list">
<li class="timeline_item timeline_item--left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, dolores.</p>
<div class="point"></div>
</li>
<li class="timeline_item timeline_item--right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, maiores?</p>
<div class="point"></div>
</li>
<li class="timeline_item timeline_item--left">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, pariatur?</p>
<div class="point"></div>
</li>
<li class="timeline_item timeline_item--right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, ipsa?</p>
<div class="point"></div>
</li>
</ul>
</div>
</main>