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

[Dúvida] Lupa encima da 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 Thiago Anderson Paz Pinheiro
| 16.1k xp | 19 posts
.banner {
    background: var(--azul);
    color: var(--branco);
    text-align: center;
    padding: 2.5em 2em;
}

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

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

.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;
    background: url("../img/lupa.svg") no-repeat;

}

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

3 respostas
solução!
por Renan Lima
| 3619.9k xp | 7623 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Thiago.

Tudo bem?

Faltou você adicionar algumas propriedades no placeholder da classe .bannerpesquisa que é o background-position: 1em; e o text-align: center;, com isso altera a posição do placeholder centralizando o texto. Não sei se a instrutora já falou sobre isso, ou se ela ainda vai abordar esse assunto:

CSS:

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

Se mesmo assim não ficar perfeito é por causa do resto dos estilos que devem ser atribuídos dentro do @media querie para a versão mobile.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.

por Thiago Anderson Paz Pinheiro
| 16.1k xp | 19 posts

Valeu Renan, era apenas isso mesmo.

por Renan Lima
| 3619.9k xp | 7623 posts
Alura Scuba Team Apoio Educacional - Alura

Valeu Thiago. Fico feliz em ajudar :)