Проблемы с адаптируемостью сайта. Поможете?

Question

[egor2653]

Вот вроде бы красиво, начинаю сжимать экран или менять масштаб браузера всё начинает ехать. А если точнее, то масштабированию не поддаётся линия. Нужно что бы синий указатель попадал в центр овала с названием, который при масштабировании окна браузера улетает вниз.

В ...... идёт наполнение тех блоков

<div class="mid">
      <div class="left">
        <h1>Подборка лучших бесплатных нейросетей-художников за этот год</h1>
        <div class="Common_block" style="margin-top: 50%;">
          <img class="Bookmark2" src="Bookmark1.png">
          <div class="Indoor_unit">
            .....
          </div>
        </div>
        <div class="Common_block">
          <img class="Bookmark2" src="Bookmark1.png">
          <div class="Indoor_unit">
            .....
          </div>
        </div>
      </div>
      <div class="mid_mid">
        <p class="name1">ruDALL-E</p>
        <div class="line" style="height: 126%;"></div>
        <p class="name1">Starryai</p>
        <div class="line" style="height: 425px;"></div>
        <p class="name1">Midjourney</p>
        <div class="line" style="height: 505px;"></div>
        <p class="name1">Ostagram</p>
        <div class="line" style="height: 570px;"></div>
        <p class="name1">Different Dimension Me</p>
      </div>
      <div class="right">
        <div class="Common_block" style="margin-top: 0;">
          <img class="Bookmark2" src="Bookmark1.png">
          <div class="Indoor_unit">
            .....
          </div>
        </div>
        <div class="Common_block">
          <img class="Bookmark2" src="Bookmark1.png">
          <div class="Indoor_unit">
            .....
          </div>
        </div>
        <div class="Common_block">
          <img class="Bookmark2" src="Bookmark1.png">
          <div class="Indoor_unit">
            .....
          </div>
        </div>
</div>

.name1 {
        width: 100%;
        height: auto;
        margin: 0 auto;
        border: thick solid #FFFFFF;
        background-color: #4F4A4A;
        border-radius: 40px;
        text-align: center;
        border-width: 2px;
        z-index: 2;
      }
      .line {
        padding-left: 50%;
      }
      .line:before {
        content: " ";
        background: #FFFFFF;
        width: 2px;
        height: 100%;
        float: left;
        margin-left: 3%;
        z-index: 1;
      }
      .left {
        float: left;
        width: 44%;
        height: 400px;
      }
      .mid_mid {
        width: 8%;
        height: 400px;
        z-index: 1;
        padding-top: 1%;
      }
      .right {
        width: 44%;
        height: 400px;
      }
      .Common_block {
        float: left;
        margin-top: 10%;
      }
      .Bookmark1 {
        position: absolute;
        pointer-events: none;
        margin-left: 1%;
        width: 10%;
        height: auto;
        z-index: 999;
      }

Comments

[Вадим]

И как же интересно Вы предлагаете Вам помочь? Вы даже код не предоставили, чтобы можно было воспроизвести поведение. Так, лишь какие-то отрывки.
Предлагаете в голове компилировать?

Демку на codepen сделайте.

[egor2653]

Вадим, надеюсь правильно сделал "демку", хотя шрифты и может быть что-то ещё не перенёс
https://codepen.io/Redoran3206/pen/abjJwwQ?editors=1000

[Вадим]

egor2653, Да, верно.
Если посмотреть как сделано в других таймлайнах, например тут https://codepen.io/girlgeek/pen/OgqBgj взятый отсюда: https://www.internet-technologies.ru/articles/css-..., то решение сходу - сделать названия так же частью блока с описанием элемента, а не частью средней линии.

[egor2653]

Вадим, благодарю :3