Olá, uso o tema grátis disponibilizado pela LI do Google, mas ele tem espaços enormes tanto no desktop como no mobile (no mobile a parte que de baixo está ok) só incomoda a listagem.
Testei alguns códigos que encontrei aqui e modifiquei conforme o necessário para o tema, mas somente consegue levantar a palavra lançamentos.
Como eu conseguiria reduzir um pouco esses espaços marcados em vermelho?
Obrigado!
.banner.cheio+.row-fluid {
margin-top: 0px;
}
.conteiner-principal .conteiner {
padding: 0px 20px;
}
.g_ .g_title,
.g_ .listagem .titulo-categoria,
.g_ .pagina-pagina h1.titulo {
margin: 0;
}
.listagem .titulo-categoria strong {
margin: 0;
}
.listagem .listagem-linha:first-child {
padding: 0;
}
.g_ #rodape .institucional {
padding: 0;
}
.g_ #rodape .pagamento-selos {
padding: 0;
}
.g_ #rodape>div:last-child {
padding: 0;
}
.g_ .pagina-categoria .listagem-linha .row-fluid>li,
.g_ .pagina-inicial .listagem-linha>ul>li {
margin-bottom: 0;
}
.g_ .listagem .listagem-item .add-wishlist {
top: 0;
}
.g_ .listagem .bandeiras-produto {
top: 0;
}
.listagem .span4 .imagem-produto,
.listagem .produtos-carrossel[data-produtos-linha="3"] .imagem-produto {
height: 260px!important;
}
.listagem .produtos-carrossel .listagem-linha li .listagem-item {
height: 400px!important;
}
Top, funcionou! Achei melhor por um pouquinho de espaço, desta vez ficou bem coladinho!
Obrigado!
@Leonardo_Vicentini_F No desktop está perfeito, mas no mobile alguns espaços ainda persistem, como os espaços (2) acima e abaixo do institucional.
Outro detalhe que notei, que acontece apenas no mobile, o primeiro produto da listagem fica mais acima do que os próximos (1). Existe uma maneira de arrumar isso? Só reparei neste problema após inserir esses códigos de espaço, mas talvez seja a altura da imagem que estou usando na horizontal.
Tentei usar o código @media (max-width: 767px) .g_e alguns que você informou, mas sem sucesso!
Bom dia,
Tenta assim e vê se dá certo…
@media only screen and (max-width: 767px) {
.listagem-linha li {
margin-top: 0px;
}
}
@media (max-width: 767px) {
.g_ #rodape .institucional {
padding-top: 0px!important;
}
}
@media only screen and (max-width: 767px) {
#corpo .conteiner > div {
margin: 0 0 0px;
}
}
@media (max-width: 767px) {
#rodape .row-flex>div {
margin-bottom: 0;
}
}
@media (max-width: 767px) {
.conteiner-principal .conteiner {
padding: 10px 0px 0 0px!important;
}
}
Opa, funcionou!
Obrigado!