Ajuda personalização site versão mobile

tem que pegar essa configuração que vc fez e colocar para ser aplicada somente quando tiver no minimo ou maximo uma x resolução

image

@media only screen and (max-width: 767px){
    .listagem .listagem-linha li {
        width: 50%;
        float: left;
        padding: 0!important;
        margin: 0!important;
    }
}

Leonardo muitíssimo obrigada mesmooooo :slight_smile:

Olá, conseguiu manter 2 colunas na versão mobile e retornar para 4 no desktop? Se sim, poderia me enviar o código? Estou com tudo e 2 colunas e quero o desktop com 4.

deixe para 4 produtos por linha, dai podemos criar um CSS para deixar 2 na visão menor (celular)
avise quando fizer!

Feito! Eu tive que tirar na visão de 4, pois estava desconfigurando a visão de 2 no celular.

teste este CSS

@media (max-width: 768px){
    div#listagemProdutos  li.listagem-linha  li.span3 {
        min-height: 500px;
    }
}

Não funcionou. Não mudou nada. Aparece um alerta na linha div#listagem…

muda para isso

@media (max-width: 768px){
  div#listagemProdutos li.listagem-linha li.span3 {
      min-height: 500px;
      width: 50%;
      margin: 0;
      padding: 0;
      float: left;
  }
  .listagem .listagem-item .imagem-produto, .listagem .listagem-item .info-produto {
      width: 100%;
  }
}

Funcionou. Muito obrigada!
Será que no carrinho é possível deixar como lista (a disposição dos produtos) ao invés de blocos?

Ficou um espaço bem grande entre as linhas. Mas não deve ter como mudar, né?

este é o problema para 2 itens por linha (da forma que sei fazer), precisa se encaixar no tamanho em par, se nao fica um espaço vazio e o layout quebrado, para o de baixo ficar certo, o maior item está com 477px, então dei uma folga, mas vc pode controlar o tamanho minimo no item marcado em amarelo, pode ate remover para ver o que estou falando.

Certo. Muito obrigada.
Agora reparei que o código inutilizou a função do botão comprar na listagem do produto. Ao invés de adicionar ao Carrinho (como estava fazendo), está entrando no produto.
Tem algo que eu consigo fazer para retornar a função? No painel está cadastrado direitinho.

acho que nao foi o codigo, remova e vamos testar sem o codigo

Leonardo, realmente não foi. É uma funcionalidade nativa e não está funcionando.

Isso ficou muito bom. Consegui reduzir bastante. Obrigada!

Leonardo, boa noite!

Eu achei um código que deixou os meus produtos na versão mobile com dois produtos por linha, porém o botão comprar ficou em cima das fotos, conforme imagem abaixo:

Será que você consegue me ajudar, com um código que eu consiga colocar este botão mais pra baixo e centralizado? Ou em alguma outra posição que não atrapalhe a visualização da imagem?

Mande a url deste site para eu avaliar

Olá, Leonardo, tudo bem? Eu consegui um código que deixou o botão mais embaixo, mas você sabe me dizer como faço para trocar a lupinha por algum ouro ícone? Que combine mais com a frase que coloquei no botão?

vejo que já conseguiu o que queria, seria bom diminuir o tamanho da letra.

Sim, consegui colocar abaixo, porém gostaria de saber como faço talvez para retirar a lupa, ou mudar a ícone!

Vou ver tbm se consigo diminuir a letra como indicou, pois personalizei de acordo com o tamanho da minha tela :slight_smile: