Alterar tamahos de cabeçalho no Mobile

Layout
1

Boa tarde
Consegui deixar o cabeçalho da minha loja do jeito que eu queria no Desktop, e até certo ponto no Mobile também, só que no Mobile ficou muito grande e com vários detalhes indesejados.
Minha loja é a http://ribeiroscar.lojaintegrada.com.br
Segue a foto da versão Mobile

IMG_6875.PNG
IMG_6875.PNG1242×2688 339 KB

Gostaria que a barra de pesquisa ficasse mais próxima da logo, de uma forma que a logo fique centralizada, que o botão da lupa ficasse do tamanho da barra de pesquisa, arredondar as bordas da barra, tirar a sombra do fundo dela, e deixar a sobra da barra vermelha como um contorno p/ a barra de pesquisa. Consegue me ajudar?
Desde já muito obrigado.

2 
#cabecalho .conteiner {
    padding-bottom: 0px;
}

@media only screen and (max-width: 767px){
.busca .botao-busca {
    top: -1px;
    line-height: 30px;
}
}

image
image386×740 95.9 KB

3

Até que funcionou, mas alterou a versão Desktop também… Meu cabeçalho no Desktop ficou pela metade :scream:

4 
@media only screen and (max-width: 767px){
	.listagem-linha li {
		margin-top: 0;
	}
	#cabecalho .conteiner {
		padding-bottom: 0px;
	}
	.busca .botao-busca {
		top: -1px;
		line-height: 30px;
	}
}
5

Show. Muito obrigado, Leonardo. Tenho acompanhado tuas soluções há um tempo… Tu manda muito bem. Obrigado!!

1 curtida