0

Estou desenvolvendo uma página onde precisei fazer um tipo de "steps", optei por seguir com as cols do bootstrap e com css nth child odd e even setar as margens e essas linhas pontilhadas ao lado.

O problema esta justamente nelas. Tentei posicionar de diferentes formas porém é praticamente impossível deixar responsivo (de md pra cima) utilizando ela em um before. O texto de dentro dos box pode variar.

inserir a descrição da imagem aqui

Funcionaria se eu definisse as posições absolutas pra cada box em todos os breakpoints necessários. Mas é muito trabalho e não fica dinâmico.

Alguem já viu algo do tipo em css ou conhece uma lib que faça algo do tipo?

Veja o snippet na página toda, não estou utilizando isso em sm.

.medicine__section_howitworks {
  position: relative;
  padding-top: 127px;
  padding-bottom: 127px;
}
.medicine__section_howitworks:before {
  content: '';
  top: 0px;
  background-image: url('https://i.imgur.com/eZWa9Dh.png');
  background-position: center left;
  background-repeat: no-repeat;
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
}
.medicine__section_howitworks__title {
  font-weight: 900;
  font-size: 40px;
  line-height: 47px;
  text-align: center;
}
.medicine__section_howitworks__title b {
  color: #00d6c0;
}
.medicine__section_howitworks__box {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  box-shadow: 0px 10px 30px rgba(0, 162, 162, 0.08);
  border-radius: 10px;
  padding: 20px 40px;
}
.medicine__section_howitworks__box p {
  margin-bottom: 0px;
}
.medicine__section_howitworks__box p b {
  color: #00d6c0;
}
.medicine__section_howitworks .oddeven {
  margin-bottom: 40px;
}
@media (min-width: 992px) {
.medicine__section_howitworks .oddeven:nth-child(odd) {
  margin-top: -70px;
  position: relative;
}
.medicine__section_howitworks .oddeven:nth-child(odd)::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  right: -50px;
  bottom: 60px;
  background-image: url('https://i.imgur.com/eLhfY8h.png');
  background-repeat: no-repeat;
  background-position: center right;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="medicine__section_howitworks">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="medicine__section_howitworks__title">
          Veja como <b>funciona</b>:
        </div>
      </div>
      <div class="col-md-6 oddeven">
        <div class="medicine__section_howitworks__box">
          <div class="row align-items-center">
            <div class="col-3">
              <img src="https://i.imgur.com/lGK7Bst.png">
            </div>
            <div class="col-9">
              <p>Basta baixar o aplicativo g-----</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 oddeven">
        <div class="medicine__section_howitworks__box">
          <div class="row align-items-center">
            <div class="col-9 text-right">
              <p>Preencher um breve cadastro sobre sua saúde</p>
            </div>
            <div class="col-3">
              <img src="https://i.imgur.com/lGK7Bst.png">
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 oddeven">
        <div class="medicine__section_howitworks__box">
          <div class="row align-items-center">
            <div class="col-3">
              <img src="https://i.imgur.com/lGK7Bst.png">
            </div>
            <div class="col-9">
              <p>Acionar o Botão Médico no aplicativo g-----</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 oddeven">
        <div class="medicine__section_howitworks__box">
          <div class="row align-items-center">
            <div class="col-9 text-right">
              <p>E pronto! Você será conectado rapidamente a um excelente médico, <b>altamente qualificado</b> para o atendimento</p>
            </div>
            <div class="col-3">
              <img src="https://i.imgur.com/lGK7Bst.png">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

3
  • Vc falou que não está usando em Mobile, mas é para ficar responsivo no Mobile? Ficou meio confuso, vem tem um imagem de como vc quer em telas grandes e de como gostaria em telas pequenas?
    – hugocsl
    19/06/2019 às 18:30
  • Sim, breakpoint sm não estou usando mas de md pra cima sim. 19/06/2019 às 18:34
  • Adicione a linha ao contrário, aumentei o tamanho dos box, diminui o width das linhas, não ficou dinâmico mas funcionou até encontrar uma solução melhor. 19/06/2019 às 19:06

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .