Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Lupa colada com a palavra 'Qual".

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Barra de pesquisa

por Paulo Fernando Chaves da Silva
| 19.9k xp | 5 posts
Professor de Inglês

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Pq Será que a lupa está colada na palavra 'Qual'?

banner.css

.banner__pesquisa {
background-color: transparent;
border: solid 1px 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; text-align: center; color: var(--branco); background: url("../img/Lupa.svg") no-repeat; background-position: 1em; }

Se eu coloco um padding: 50px; resolve o problema.

2 respostas
solução!
por Paulo Fernando Chaves da Silva
| 19.9k xp | 5 posts
Professor de Inglês

Ahh O problema foi que optei por Iphone SE no Dev Tools. Isso faz diferença. Colocando para Iphone 12 Pro fica igual. Então eu deixei no Iphone SE e coloquei 0.5em; e foi resolvido.

por Lorena Garcia
| 8364.6k xp | 12215 posts
Alura Scuba Team Suporte Educacional

Oi Paulo, tudo bem?

Sim, a escolha do dispositivo na ferramenta de desenvolvedor pode afetar a aparência do layout, já que cada dispositivo possui uma densidade de pixels diferente. No caso, ajustar a unidade de medida para em foi uma boa forma de resolver o problema.

Fico feliz que tenha conseguido resolver o problema!

Irei finalizar o tópico para você.

Um abraço e bons estudos.