1
resposta

A lupa está ficando por cima do texto.

.banner { /* background-color: var(--azul-degrade); */ background-color: #002F52; color: var(--branco); text-align: center; padding: 2.5em 2em; }

.banner__titulo { font-size: 18px; font-weight: 700; }

.banner__texto { font-weight: 500; margin: 1em 0; }

.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(--fonte-principal); font-size: 14px; font-weight: 400; color: var(--branco); background: url("../img/Lupa.svg") no-repeat; background-position: 1em; align-items: center; }

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Para corrigir isso, precisamos ajustar o estilo da lupa na classe .bannerpesquisa.

Primeiro, a classe .bannerpesquisa define o estilo do elemento de pesquisa, que é a caixa de texto onde você digita algo. O problema está na propriedade background que está definida da seguinte forma:

background: url("../img/Lupa.svg") no-repeat;

Essa linha está definindo a imagem da lupa como plano de fundo da caixa de pesquisa. O no-repeat significa que a imagem não deve se repetir. No entanto, a imagem da lupa está ficando à esquerda da caixa de texto por causa do background-position: 1em;.

Para resolver isso, você pode ajustar o background-position para right center, o que fará com que a imagem da lupa fique do lado direito da caixa de pesquisa, alinhada verticalmente ao centro:

.banner__pesquisa::placeholder {
  font-family: var(--fonte-principal);
  font-size: 14px;
  font-weight: 400;
  color: var(--branco);
  background: url("../img/Lupa.svg") no-repeat right center; /* Ajuste aqui */
  padding-left: 1em; /* Adicionei isso para dar espaço à imagem */
}

Com essa alteração, a lupa deve ficar ao lado direito da caixa de pesquisa, não sobrepondo o texto. Certifique-se de ajustar o padding-left para dar espaço suficiente para a imagem e o texto na caixa de pesquisa.

espero ter ajudao ou pelomenos dado uma luz sobre o problema hehe.