Boa tarde, alguem sabe se tem como exibir 2 colunas de produtos no Mobile?
Igual essa foto
@media only screen and (max-width: 767px){
div#listagemProdutos li.listagem-linha > ul {
display:flex;
flex-wrap: wrap;
}
div#listagemProdutos li.listagem-linha > ul > li {
flex: 50%;
margin: 0;
}
}
3 curtidas
Nú, show de bola
Agora só mais uma coisa, tem como diminuir essa lupinha e o escrito ver mais? ou ate tirar
@media only screen and (max-width: 479px){
.acoes-produto-responsiva {
top: unset;
right: unset;
width: 90%;
text-align: center;
bottom: 0;
}
.listagem .listagem-item {
padding-bottom: 50px;
text-align:center;
}
div#listagemProdutos li.listagem-linha > ul > li {
display: flex;
margin-bottom: 30px;
}
}
mesmo assim, se quiser a fonte menor…
@media only screen and (max-width: 479px){
.acoes-produto-responsiva {
top: unset;
right: unset;
width: 90%;
text-align: center;
bottom: 0;
}
.listagem .listagem-item {
padding-bottom: 50px;
text-align:center;
}
div#listagemProdutos li.listagem-linha > ul > li {
display: flex;
margin-bottom: 30px;
}
.acoes-produto-responsiva.visible-phone a.tag-comprar.fundo-principal *{
font-size: 15px
}
.acoes-produto-responsiva .tag-comprar i {
top: -2px;
}
}
2 curtidas
Leonardo, consegue ver meu caso e me ajudar a so deixar o produto aberto assim? eu já tirei a caixa do produto mas a imagem em si está muito pequena… porém a listadem dupla e os produtos todos alinhados está correto.
boa tarde, tenta assim e olha se é isso…
@media screen and (max-width: 767px) {
#listagemProdutos.listagem .imagem-produto, #listagemProdutos.listagem .produtos-carrossel[data-produtos-linha] .imagem-produto {
height: 250px!important;
}
}
se quiser deixar o nome do produto mais perto da imagem adiciona esse outro aqui junto com o código acima…
@media (max-width: 767px) {
.listagem .listagem-item .info-produto a.nome-produto {
min-height: 0;
}
1 curtida
Ficou otimo… aumentou… mas deu muita diferença de espaço dos produtos debaixo… consigo diminuir?
Tenta assim…
@media screen and (max-width: 767px) {
#listagemProdutos.listagem .listagem-item .info-produto, .listagem.aproveite-tambem .listagem-item .info-produto {
min-height: 100px;
max-height: 100px;
}
}
Ceu certo paulo! muito obrigado mesmo! se tiver mais pontos negativos no site que vc visualizou ai e que vc tem códigos prontos pra passar pra nós… agradeceria muito!
Opa bom dia…
Se tiver algum ponto que queira ajustar, manda um print do local daí vemos um código para fazer a correção desta maneira é mais fácil…
1 curtida