1
resposta

O layout do "diferenciais__lista" não esta igual ao figma e a aula

Eu coloquei o justify-content: space-around e não ficou igual, testei algumas coisas e não consegui resolver. Alguém pode me ajudar? as "li" estão ficando na mesma linha ao invés de 2 na mesma linha e 1 em baixo.

html:

            <section class="diferenciais container">
                <ul class="diferenciais__lista">
                    <li class="diferenciais__item diferenciais__item--tempo">
                        <h2 class="item__titulo">Tempo</h2>
                        <p class="item__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
                    </li>
                    <li class="diferenciais__item diferenciais__item--foco">
                        <h2 class="item__titulo">Foco</h2>
                        <p class="item__texto">Focamos no empreendimento! Oferecemos serviços de qualidade com preços acessíveis.</p>
                    </li>
                    <li class="diferenciais__item diferenciais__item--especialistas">
                        <h2 class="item__titulo">Especialistas</h2>
                        <p class="item__texto">Equipe experiente e especializada! Testamos todos os produtos antes do lançamento.</p>
                    </li>
                </ul>
            </section>

css:

.diferenciais {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.diferenciais__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.diferenciais__item {
  max-width: 350px;

  box-sizing: border-box;

  background-repeat: no-repeat;
  background-position: top 1.25rem left 2.5rem;

  padding: 2rem 0 2rem 5rem;
}

.diferenciais__item--tempo {
  background-image: url(../img/icone-relogio.png);
}

.diferenciais__item--foco {
  background-image: url(../img/icone-dinheiro.png);
}

.diferenciais__item--especialistas {
  background-image: url(../img/icone-quimica.png);
}

.item__titulo {
  color: var(--cinza-escuro);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;

  margin-bottom: 1.5rem;
}

.item__texto {
  line-height: normal;
}

@media screen and (min-width: 1024px) {
  .diferenciais {
    background-color: var(--cinza-claro);
  }

  .diferenciais__lista {
    justify-content: space-around;
  }
}

resultado: Imagem de como ficou o resultado, com as imagens na horizontal

1 resposta
.diferenciais__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software