Bom dia! É possível alterar a ordem que as grades dos produtos aparecem? Por exemplo, na minha loja virtual www.lojagaba.com.br, no produto da imagem a seguir, gostaria que o primeiro item a aparecer fosse o material, e só depois a cor. Verifiquei que todos meus produtos vêm assim por padrão, e eu particularmente não acho funcional. Poderiam me ajudar?
Tente utilizar esse CSS:
.produto .principal .atributos {
display: flex;
flex-direction: column-reverse;
Aproveite e use esse para ajustar no mobile
@media only screen and (max-width: 767px){
.produto .principal .atributos {
align-items: center;
}
}
Tudo em uma linha apenas? Ou em 3 linhas?
faz direto assim no editor de css:
.produto .principal .atributos {
display: flex;
flex-direction: column-reverse;
}
@media only screen and (max-width: 767px){
.produto .principal .atributos {
align-items: center;
}
}
Ficou perfeito! Muito obrigado!!!
Alguma sugestão pra diminuir os espaços entre o banner e entre as categorias?
Da sim. Manda um print do espaçamento que quer diminuir.
Primeiro essa (distância do ultimo produto pro rodapé):
Depois essa (reduzir espaço entre o último banner e a primeira categoria anunciada):
Por último esse (reduzir o tamanho dessa caixa que fica ao redor do texto):
Estou usando o seguinte código, não sei se vai influenciar:
@media (max-width: 768px){#listagemProdutos > ul{display:block;justify-content:center;align-items:center}#listagemProdutos > ul li.listagem-linha ul{display:inline-block;align-items:center;justify-content:center}#listagemProdutos > ul li.listagem-linha ul li{box-sizing:border-box;float:left;width:50% ;margin:0 0 15px}.listagem.com-caixa .listagem-item{border:0;min-height:368px}.listagem.com-caixa .listagem-item .imagem-produto{border:0;padding:0}.listagem .listagem-item .info-produto{border:none!important;padding:5px 0}.listagem .listagem-item .info-produto a.nome-produto{min-height:110px;display:flex;align-items:center}.busca .botao-busca{padding:5px 14px!important}.listagem .listagem-item .acoes-produto-responsiva,#btn-top{display:none!important}.preco-produto s.preco-venda{display:block;font-size:18px}.preco-produto .desconto-a-vista, .preco-produto strong.titulo{font-size: 14px !important}.preco-venda {display:block;font-size:16px !important;}}
veja se esse vai ficar bom
/reduz espaçamento banner e rodape/
#corpo {
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
}
/reduz espaçamento produto/
.listagem .listagem-item {
border-radius: 10px !important;
height: 480px !important;
}
/ajustar botão comprar agora/
.listagem-item:hover .acoes-produto {
bottom: 35%;
opacity: 1;
}
/background e bordas produtos/
listagem-item:hover .acoes-produto {
background-color: #f7f7f7;
border: 1px solid #eee8da;
}
Coloquei os códigos e até agora não mudou nada…
delete esse que mandei e coloca esse:
#corpo {
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
}
.listagem .listagem-item {
border-radius: 10px !important;
height: 480px !important;
}
.listagem-item:hover .acoes-produto {
bottom: 35%;
opacity: 1;
}
listagem-item:hover .acoes-produto {
background-color: #f7f7f7;
border: 1px solid #eee8da;
}
deu erro por causa dos comentários no css. Fica entre barras e asterisco, mas aqui na comunidade deleta o asterisco. Deve ser por isso
Entendi, muito obrigado pela sua ajuda, mas esses códigos não mudaram em nada a aparência ainda…
manda um print da tela do css. era pra ter mudado.
.bandeiras-produto .bandeira-carrinho {background-color: #DD4124 !important;}
body {color: #332E20;}
.botao.principal, #cabecalho .menu .titulo, .menu li > a .icon-chevron-down {color: #F6EFE5}
.com-promocao .preco-venda, .preco-produto .preco-venda {color: #CC7237 !important;}
#cabecalho, .fundo-secundario, #barraTopo {background-color: #F6EFE5 !important;}
i.fundo-secundario {background: none !important;}
#fmais-container {display:none}
#rodape .titulo {color: #e2a855 !important}
.links-rodape ul li a {color: #c3734c !important}
@media only screen and (max-width: 767px) {
.row-fluid.banner {display:none}
.busca, .conteudo-topo .busca-mobile {background-color: #F6EFE5 !important}
.row-fluid.mini-banner {display: block !important}
.mini-banner.hidden-phone {display:block !important}
.flexslider .slides {width: 350px !important}
.flexslider .slides li {margin-bottom: 20px !important}
}
.links-rodape ul li a, .sobre-loja-rodape p {font-size: 14px !important}
#modalContato {top: 15% !important; width: 600px !important; margin-left: -300px !important;}
.span6 table {display:none !important}
@media (max-width: 768px){#listagemProdutos > ul{display:block;justify-content:center;align-items:center}#listagemProdutos > ul li.listagem-linha ul{display:inline-block;align-items:center;justify-content:center}#listagemProdutos > ul li.listagem-linha ul li{box-sizing:border-box;float:left;width:50% ;margin:0 0 15px}.listagem.com-caixa .listagem-item{border:0;min-height:368px}.listagem.com-caixa .listagem-item .imagem-produto{border:0;padding:0}.listagem .listagem-item .info-produto{border:none!important;padding:5px 0}.listagem .listagem-item .info-produto a.nome-produto{min-height:110px;display:flex;align-items:center}.busca .botao-busca{padding:5px 14px!important}.listagem .listagem-item .acoes-produto-responsiva,#btn-top{display:none!important}.preco-produto s.preco-venda{display:block;font-size:18px}.preco-produto .desconto-a-vista, .preco-produto strong.titulo{font-size: 14px !important}.preco-venda {display:block;font-size:16px !important;}}
.produto .principal .atributos {
display: flex;
flex-direction: column-reverse;
}
@media only screen and (max-width: 767px){
.produto .principal .atributos {
align-items: center;
}
}
#corpo {
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
}
.listagem .listagem-item {
border-radius: 10px !important;
height: 480px !important;
}
.listagem-item:hover .acoes-produto {
bottom: 35%;
opacity: 1;
}
listagem-item:hover .acoes-produto {
background-color: #f7f7f7;
border: 1px solid #eee8da;
}
#corpo {
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
}
.listagem .listagem-item {
border-radius: 10px !important;
height: 415px !important;
}
.listagem-item:hover .acoes-produto {
bottom: 35%;
opacity: 1;
}
.conteiner-principal .conteiner {
padding: 0;
}
listagem-item:hover .acoes-produto {
background-color: #f7f7f7 !important;
border: 1px solid #eee8da !important;
}
delete o que tinha mandando antes e adiciona esse
Agora mudou, mas veja o que ele faz com os preços. Alguns ficam grandes e outros pequenos demais:
Além disso, o mobile ficou zoado, tá cortando informação do boleto…
vou ver se consigo modificar isso, enquanto isso deixa sem esse código.
1 curtida
Obrigado amigo. Algum sucesso?
Aproveitando, todos os meus produtos estão sendo listados em um fundo branco.
Como altero a cor para #e2a855?