Why when scaling a browser window .point elements move from a vertical straight line in the center .timeline_list: before ? The width of the container and the wrapper in%, the left and right at .point are also in% (in px, the same effect). In these situations, too, media queries should be used?

* { 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>

    1 answer 1

    Well, I can not explain, but it's not difficult to do it ... see

    To test the adaptability of this layout, open the whole page and squeeze the browser itself ...

    experimented here: https://codepen.io/topicstarter/pen/oRLLyL

     * { list-style: none; margin: 0; padding: 0; } .items { width: 540px; margin: auto; position: relative; } .items:after { content: ""; display: block; width: 4px; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); top: 0; background: #cc0000; z-index: 0; } .marker { display: block; min-width: 30px; height: 30px; border-radius: 50%; background: blue; margin: 0 4px; position: relative; z-index: 1; } .item { display: flex; width: 290px; } .item:nth-child(odd) { margin-left: auto; } .item:nth-of-type(even) { text-align: right } @media(max-width: 555px) { .marker { min-width: 20px; height: 20px; border-radius: 50%; } .items { width: 373px; margin: auto; position: relative; } .item { width: 200px; } .text { font-size: 14px; } } 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="items"> <div class="item"> <div class="marker"></div> <div class="text"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui tenetur nemo placeat tempora reiciendis? </div> </div> <div class="item"> <div class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae officiis atque fuga odio illo. </div> <div class="marker"></div> </div> <div class="item"> <div class="marker"></div> <div class="text"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui tenetur nemo placeat tempora reiciendis? </div> </div> <div class="item"> <div class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae officiis atque fuga odio illo. </div> <div class="marker"></div> </div> </div>

    • markers still walk a little. you do not have? - ur pride
    • @urpride I don't have ... show screen - MaximLensky pm
    • .marker changed the margin: 0 4px to 0 5px and everything started to play) - ur pride