Entrar Ainda não tem acesso?
3
respostas

Imagem da "lupa" fica cortada

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Projeto da aula anterior

por João Pedro Wouters de Oliveira
| 16k xp | 5 posts
Sócio-Diretor

Minha imagem da lupa está ficando cortada, é algum bug? (meu código está igual ao da aula)

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

.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;
    text-align: center;
    color: var(--branco);
    background: url(../img/Pesquisa1.svg) no-repeat;
    background-position: 1em;
}
3 respostas
por RODRIGO SILVA HARDER
| 2301.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, João Pedro, tudo bem?

O ícone da lupa fica cortado, pois a imagem tenta se adequar a altura do texto colocado no placeholder. Podemos solucionar esse problema utilizando um padding com valor de 5px ao definir a classe .banner__pesquisa::placeholder. Ao definir o espaçamento interno, a imagem vai aparecer por completo sem ser cortada.

O código completo está abaixo:

.banner__pesquisa::placeholder {
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: var(--branco);
    background: url(../imagens/pesquisa.svg) no-repeat;
    background-position: 1em;
    padding:5px;
}

Espero ter ajudado, caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por João Pedro Wouters de Oliveira
| 16k xp | 5 posts
Sócio-Diretor

Fala Rodrigo, beleza?

Então, aj testei até com 30px, ela segue cortada... Deve ser algum bug Ja testei baixar a imagem do Figma novamente, e segue cortada. Talvez quando colocar no vercel fique certo. Vamos ver.

Obrigado

por RODRIGO SILVA HARDER
| 2301.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, João, como vai?

Sinto muito que você ainda esteja enfrentando esse problema. Caso queira envie seu projeto no GitHub ou um drive com todos os arquivos utilizados no projeto para que eu possa realizar novos testes e te ajudar a solucionar essa situação.

Fico no aguardo!