2
respostas

Responsividade não funciona no banner e no contato

https://github.com/ASLeticia/Alura-Books

Não estou conseguindo fazer com que a barra de pesquisa fique menor para a versão 1024px e a area de contato não fica corretamente alinhada como no figma. Se alguém puder ajudar, estou há 4 dias tentando descobrir o que está errado mas não consigo. O link está acima para darem uma olhada.

2 respostas

Bom dia Leticia, tudo bom ??

Pelo que eu vi, na parte do Banner a tua barra de pesquisa ela não estava diminuindo, porque você colocou essas linhas de código no arquivo style.css

.banner__pesquisa {
  background-color: transparent;
  border: 1px solid var(--branco);
  color: var(--branco);
  border-radius: 24px;
  padding: 1em;
  width: 100%;
}

.banner__pesquisa::placeholder {
  font-family: var(--font-principal);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: var(--branco);
  background: url("../Assets/Lupa.svg") no-repeat;
  background-position: 1em;
}

Por ele ser o arquivo principal de estilos, o html pega ele como sendo mais importante do que a própria banner.css

E o segundo erro, na parte de contatos foi porque você cometeu o erro de iniciar a

<div class="contato__descricao> </div>"

Ou seja, você abriu a div, mas fechou nela mesmo, logo você não criou o flex box da maneira correta. A maneira certa, para as coisas ficarem alinhas em forma de linha seria assim, e você deve implementar mais coisas no css

<section class="contato">
  <div class="contato__descricao">
    <h2 class="contato__titulo">Fique por Dentro das Novidades</h2>
    <p class="contato__texto">
      Atualizações de e-books, novos livros, promoções e outros.
    </p>
  </div>

  <input
    type="email"
    class="contato__email"
    placeholder="Cadastre seu e-mail"
  />
</section>

Muito obrigada, acabei de corrigir aqui!!