[Dúvida] posicionamento da "lupa" e texto

Oii, Dev! Tudo bem?

Agradeço por interagir no fórum compartilhando a sua observação. É importante termos em mente que nem sempre o código ficará exatamente igual ao design que recebemos, mas podemos tentar ajustar para que fique o mais próximo possível.

Para alinhar a imagem da lupa com o texto, você pode alterar o valor da propriedade background-position: ; que se encontra em .banner__pesquisa: :placeholder{}. Em aula, essa propriedade recebe o valor de 1em, então você pode alterar para o valor que se encaixar melhor ao seu projeto. Por exemplo, alterei o meu para 8em:

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

Ao fazer o teste, o meu ícone da lupinha ficou mais alinhada verticalmente com o texto.

E em relação à distância diferente do lado direito e esquerdo do "campo de pesquisa", você pode ajustar as margin ou o padding do elemento que contém o campo de pesquisa para que fique simétrico, ou aumentar um pouco a fonte.

Espero ter ajudado com as orientações!

Bons estudos!

Oi Nathalia, obrigado pela rápida resposta. Eu entendi suas colocações...

Massss, digamos que eu encontre pela frente um designer bastante rigoroso com o desenho de sua interface e não aceite que haja diferenças. Terei que apresentar o que ele ou o cliente, no caso, exigirem. Certo?

Então, pensando por esse lado eu gostaria de exercitar esse problema.

Mesmo usando suas sugestões ainda não consegui centralizar a img lupa e o texto dentro do campo de pesquisa. Tem alguma outra sugestão? Pois, mesmo mudando o background-position o texto se mantem centralizado em relação ao campo de pesquisa (border), mas a imagem não.

Obrigado

Oii, Bruno! Eu quem agradeço a interação, pois ela é muito válida e podermos nos desenvolver juntos. Compreendo e admiro sua atitude ao querer exercitar o problema para deixar o seu projeto com alta fidelidade.

Outra maneira seria, em modo responsivo que é abordagem do curso, na tela de 1024px temos como alternativa, adicionar a propriedade padding-left:; dentro da classe .banner__pesquisa::placeholder{} que encontra-se no `@media screen and (min-width: 1024px). Como por exemplo:

@media screen and (min-width: 1024px) {

//inicio do código

.banner__pesquisa::placeholder{
    background-position: 8em;
    padding-left: 4em;
      }
}

Então teremos o seguinte resultado:

(https://i.imgur.com/NNGmE6R.png)

É importante, também, realizar as alterações em outras mediaqueries adicionadas ao projeto tendo como base a da tela de 1024px para que todas fiquem centralizadas. Caso não consiga posicionar como desejado, peço que envie o link do seu repositório contendo todos os arquivos do seu projeto e também as dimensões da tela que você está utilizando, por gentileza.

Além disso, quando observar esses pontos em projetos reais, o interessante é manter uma conversa tempestiva entre o time de Devs com o time/profissional de Design, para que juntos encontrem um denominador comum para deixarem o projeto adequado e que agrade o cliente final, mantendo a comunicação ativa entre os profissionais.

Espero ter ajudado com as novas sugestões.

Bons estudos!

Ótimo. muito obrigado...