Как при адаптивной верстке заголовки оставить по центру, а цифру сместить влево?

Question

На первом скриншоте показано, как надо сделать. На втором показано то, как у меня пока что получается. С помощью каких инструментов я могу сделать так, как показано в макете? эти фиолетовые линии не обязательно выполнять. Я подумал, что возможно такое сделать с помощью grid, но не могу пока что понять, как это должно выглядеть.

.steps {
        width: 300px;
        height: 601px;
        flex-wrap: wrap;

        .container-navigation__step {
            display: flex;
            flex-wrap: wrap;

            .step-number {
                display: block;
            }
        }
    }
}

Answer 1

Наверное надо понять механизм и определить правильное перестроение блоков

В моём случае я использовал flexbox так как в нём уже изначально удобно делать такие манипуляции - смотрите, если что то не ясно переспросите, возможно я буду занят и отвечу не сразу

что бы проверить адаптивность откройте пример на всю страницу а сам браузер сожмите

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  counter-reset: myCounter;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.parent {
  max-width: 640px;
}

.item {
  display: flex;
}

.younger_parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.number {
  display: inline-flex;
  align-items: ;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.number:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  font-size: 36px;
}

.line {
  width: 1px;
  height: 100%;
  border: 2px solid #000;
}

.text {
  margin-left: 10px;
  margin-top: -16px;
}

.text p {
  fony-size: 18px;
}

@media(max-width: 640px) {
  .item {
    flex-direction: column;
  }
  .line {
    display: none;
  }
  .number {
    width: 100%;
    font-size: 40px;
  }
}

<div class="container">

  <div class="parent">
    <div class="item">
      <div class="younger_parent">
        <div class="number"></div>
        <div class="line"></div>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet voluptatem rerum esse incidunt, culpa vel quasi harum voluptas odit et facere vitae similique, praesentium reprehenderit tempora sit totam, modi tenetur! </p>
      </div>
    </div>
    <div class="item">
      <div class="younger_parent">
        <div class="number"></div>
        <div class="line"></div>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet voluptatem rerum esse incidunt, culpa vel quasi harum voluptas odit et facere vitae similique, praesentium reprehenderit tempora sit totam, modi tenetur! </p>
      </div>
    </div>
    <div class="item">
      <div class="younger_parent">
        <div class="number"></div>
        <div class="line"></div>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet voluptatem rerum esse incidunt, culpa vel quasi harum voluptas odit et facere vitae similique, praesentium reprehenderit tempora sit totam, modi tenetur! </p>
      </div>
    </div>
    <div class="item">
      <div class="younger_parent">
        <div class="number"></div>
        <div class="line"></div>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet voluptatem rerum esse incidunt, culpa vel quasi harum voluptas odit et facere vitae similique, praesentium reprehenderit tempora sit totam, modi tenetur! </p>
      </div>
    </div>
    <div class="item">
      <div class="younger_parent">
        <div class="number"></div>
        <div class="line"></div>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet voluptatem rerum esse incidunt, culpa vel quasi harum voluptas odit et facere vitae similique, praesentium reprehenderit tempora sit totam, modi tenetur! </p>
      </div>
    </div>
  </div>

</div>

БЛОГ НА HUSL

Как при адаптивной верстке заголовки оставить по центру, а цифру сместить влево?

Ответы (1 шт):