Como remover espaços entre menu, full baner e baner tarja

Eu ja testei vários códigos aqui da comunidade e nenhum funcionou! Será que alguem consegue me ajudar a remover esses espaços ? no mobile também tem um espaço https://zabemodafeminina-manutencao.lojaintegrada.com.br/

No desktop encontrei alguns códigos CSS que podem te ajudar, mas devo admitir que são elementos bem esquisitos.

/*Eliminando o espaço em branco superior*/
@media (min-width: 768px) {
    .logo {
        margin-bottom: 40px !important;
    }
}
/*Eliminando o espaço em branco inferior*/
.flexslider {
    margin: 0 !important;
}

.banner.cheio+.row-fluid {
    margin-top: 0px !important;
}

Funcionoouu!!! Nossa estou muito agradecida!
Deixa eu aproveitar pra te perguntar se você sabe como eu coloco o baner tarja no mobile, se eu tenho que criar a arte separada em blocos? eu criei quatro topicos , mas em uma arte só, e os códigos que eu testei para levar ele para a versão mobile não funcionou!

Essa tarja costuma mesmo ficar oculta na versão mobile. Você pode tentar mudar essa regra com um CSS, mas não tenho certeza que só isso vai resolver. Talvez seja preciso usar um código JavaScript ou alterar algo no painel administrativo da sua Loja.

Mas só por curiosidade, tenta usar esse CSS aqui:

body > div.conteiner-principal > div.secao-banners > div > div.row-fluid.banner.hidden-phone {
    display: block !important;
}

Ele apareceu no mobile, porém ficou ilegivel porque está muito pequeno, será que se eu fizer a arte separada vai dar certo?

Nesse caso você vai precisar mesmo de uma nova arte. E acho que o melhor vai ser inserir essa arte nova com um código JavaScript.

Colocar esse código que você me passou selecionando a opção java?

Não, aí você precisa criar a nova arte, subir ela no servidor e usar um código parecido com esse, onde você vai colocar a URL da imagem dentro do campo “src=‘ENDERECO_DA_IMAGEM’”:

$(document).ready(function() {
	$('body > div.conteiner-principal > div.secao-banners > div').append(`
		<div class="row-fluid banner hidden-pc">
			<div class="span12 banner tarja">
				<img src="ENDERECO_DA_IMAGEM" alt="Baner Tarja">
			</div>
		</div>
	`);
});

Esse código de cima você salva como JavaScript e insere ele no Rodapé da página.

E no CSS você acrescenta essa regra, assim essa tarja nova não aparece junto com a original:

@media (min-width: 768px) {
    .hidden-pc {
       display: none !important;
    }
}
1 curtida

Oi Jose,
eu consegui colocar uma imagem diferente com o primeiro código, porém o segundo código para fazer o banner original não aparecer no mobile, não funcionou :frowning: ficaram dois banners tarja um em cima do outro

1 curtida

Bom dia Jose!
Sera que vc conseguiria me ajudar a reduzir esses espaços no mobile?
Eu coloquei os codigos CSS que vc orientou nosso colega acima, mas no mobile não está alterando.
Esse é o meu layout hoje, e o site é o www.laspiaggia.com.br

Desde já te agradeço a ajuda que vc dá! Estou pegando variaaaas dicas dadas em outros posts!!! :slight_smile:

Abraços e obrigada!
Roberta