Gostaria de colocar 2 produtos por linha na versão mobile. No momento meu site apresenta 1 produto por linha, porem queria que fica-se com 2.
Alguém poderia me ajudar?
Oi, tudo bem?
A versão mobile possui um layout padrão, as alterações de CSS realizadas na loja para desktop, não terão efeitos na versão mobile.
No caso, para personalizar sua loja no Mobile é necessário criar um código CSS para essa página para que seja aplicada a personalização do layout no mobile.
Caso não tenha conhecimento técnico para isso, sugerimos contratar uma agência digital para promover estas mudanças.
tem uns caras ai no forum que fizeram isso…
no meu caso eu fiz ao contrário…
Vc quis mudar e deixar apenas 1 produto por linha por gosto próprio ou por alguma experiência ruim?
Eu queria muito deixar 2 produtos por linha, acho que fica muito bonito. Ate separei uns temas aqui na LI que tinha interesse em comprar, mas no momento não posso…
No meu caso achei melhor por linha na versão mobile com a tela em pe.
@media only screen and (max-width:767px){.listagem .listagem-linha li{width:50%;float:left;padding:0!important;margin:0!important}}
testa esse código
2 curtidas
Infelizmente o código nao funcionou.
@media only screen and (max-width: 767px) {
.listagem .listagem-linha li {
width: 50%;
float: left;
padding: 0 !important;
margin: 0 !important;
}
}
1 curtida
Usei o codigo, funcionou parcialmente.
Ficou 2,1,2,1,2,1…
Sabe como resolver?
Obrigado!!
Olha, não é tão simples. Você pode resolver pelo CSS mas fica incompleto.
O carrossel quando é carregado usa a configuração inicial para ser montado, calcula tamanho, o quanto precisa se mover ao ser acionado, etc. Então se ele carrega configurado para 1 por momento, ele será montado para ser assim. Se você forçar por CSS, alguma coisa vai quebrar. Seja no final do carrossel com espaços vazios ou assim como você falou.
O ideal é você “remontar” o carrossel nos layouts menores. Eu fiz isso nessa loja: https://www.zuloja.com.br/. Ele mostra 4 no desktop e 2 no mobile. Se tiver paciência, dê uma olhada nos scripts e no css que usei.
Quando eu fiz apenas os ajustes CSS colocando largura máxima de 50vw funcionou em partes, no final do carrossel ficou um espaço vazio imenso. Justamente pq ele tinha sido montado para receber 1 por linha.
3 curtidas
Breno, boa tarde!
Eu continuo com esse problema pode me ajudar?
Respondi aqui:
1 curtida
o meu também funcionou parcialmente igual o seu, vc conseguiu resolver?
aí ficou somente 1 por linha e não dois
Leonardo eu adicinonei o código, aí na última linha ficaram desproporcionais, o restante deu certinho
fiz um teste aqui, colocando um item no carrinho para parar de usar cache, e nao achei problema.
teria como mandar um print do problema?
veja se agora vai, vamos mudar a bordagem… vamos usar min em vez de max
li.listagem-linha li.span3 {
min-height: 380px;
}
Leonardo muito muito obrigadda mesmo, tudo certinho agora.
Se não for pedir muito, na versão desktop alterou também para 2 produtos por linha e não quatro, é possível alterar somente no mobile sem alterar o desktop?
sim, é possível, mas vai depender de como fez a configuração.