Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Responsividade do

Referente ao curso HTML e CSS: responsividade com mobile-first

por Lucas de Freitas Lima Santos
| 47.4k xp | 1 posts

Gostaria de saber por que a lupa não fica responsiva junto ao placeholder, em 360px ela fica sobre o texto e entre determinadas larguras até 1024 ela fica muito distante. Dentro da aula foi projetado o mobile-first e tudo funcionou legal e quando usamos o media para formatar para 1024px também fica muito boa a responsividade, mas nos intervalos de larguras ocorrem algumas quebras inesperadas. A pergunta é, seria necessário outros @media para resolver essas quebras ou tem alguma outra solução? Obrigado! Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!
por william andrade de souza
| 32.2k xp | 9 posts

Olá,

Se a intenção e deixar a lupa próxima ao texto você pode dizer para ela alinhar ao centro 

input.banner__pequisa::placeholder {
    background-position: 50%
}

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

Este ainda não e o desejado. Basta você subtrair o valor próximo a metade do tamanho do texto, para que a lupa chegue mais para a esquerda. Ficando algo como 50% - (metade do tamanho do texto) Para isso pode se utilizar a função calc(). Que deve ficar mais ou menos assim:

input.banner__pesquisa::placeholder {
    background-position: calc(50% - 120px);
}

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