Duas colunas na vitrine mobile - Tema Padrão

Desafio aos experts… @Gilberto e @douglaswp Bom dia.
Primeiramente gostaria de agradecer por tudo que extraí de seus comentários por toda a comunidade, customizei minha loja toda baseado nos seus códigos, não sou analista, programador, nada… A atitude é muito nobre, visto que nao ganham nem um centavo ajudando outros lojistas. Veja a loja que VOCES fizeram:

http://www.woutlets.com.br

Mas tenho notado que mais da metade do meu público vem de mobile, e o layout de uma coluna na vitrine de celular deixa a página longa e cansativa. Quero fazer uma mudança que já postei mais de 3x e absolutamente ninguém respondeu… Quero apenas por 2 colunas de produtos na versão mobile, conseguem mais essa?

Abraço

2 curtidas

Bom dia,

Dois produtos por linha na versão mobile? Fácil!

Me dê uns minutos que já te mando o código.

2 curtidas

Printinho, duas colunas para versão mobile. E mais uns ajustes que achei bacana fazer.

@media (max-width: 768px){#listagemProdutos > ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}#listagemProdutos > ul li.listagem-linha ul{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}#listagemProdutos > ul li.listagem-linha ul li{width:50%;margin:0 0 20px}.listagem.com-caixa .listagem-item{border:0}.listagem.com-caixa .listagem-item .imagem-produto{border:0;padding:0}.listagem .listagem-item .info-produto{border:none!important;padding:5px 0}.busca .botao-busca{padding:5px 14px!important}.listagem .listagem-item .acoes-produto-responsiva,#btn-top{display:none!important}}

Me avisa quando colcoar pra verificarmos se ficou 100%!

7 curtidas

Haaaaa não acredito… Kkkkk, que maneiro cara. Obrigado! Vou aplicar assim que chegar em casa e volto aqui pra te dizer.

Apliquei em editar CSS, ficou foda, muito muito muito obrigado…vi que
consertou o botão de busca tbm!
Apenas 2 observações:
1: o botão “topo” sumiu, apenas no mobile
2: Tem umas caixas maiores do que as outras, acho que ele dimensiona
automatico pelo tamanho do nome do produto, texto de preço,etc…
Fora esses 2 pontos, tudo está perfeito. Mesmo se ficar sem botão topo e
com as caixas tortas eu ja fiquei feliz.

Muito bom… PARABÉNS !

Foi isso mesmo @Wolf

1 - O Voltar ao topo eu removi mesmo. Estava atrapalhando o uso do Zopim, e em alguns postos da tela ele não funcionava.

2 - A altura da caixa varia mesmo de produto pra produto, não defini um valor mínimo de altura pois não conheço a sua loja, e não tinha certeza. Se quiser tem como deixar essas caixas bem alinhadinhas. Mas pode aumentar um pouco a rolagem da tela. O que acha?

Boa observação sobre o topo, eu estava fazendo um desfavor aos clientes sem saber kkkk
Sobre o tamanho dos boxes, não há problema em aumentar a rolagem um pouco não, acho que alinhado ficará um aspecto melhor. Consegue?

Respondendo ao @jetaplast Tudo feito com a ajuda da comunidade, principalmente do @douglaswp @Gilberto @DouxLune e outros… Tudo código roubado dos posts deles kkkkkk

Agradeço muito a todos !

3 curtidas

Claro,

Troca o primeiro código que te mandei por este aqui:

@media (max-width: 768px){#listagemProdutos > ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}#listagemProdutos > ul li.listagem-linha ul{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}#listagemProdutos > ul li.listagem-linha ul li{width:50%;margin:0 0 20px}.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:90px;display:flex;align-items:center}.busca .botao-busca{padding:5px 14px!important}.listagem .listagem-item .acoes-produto-responsiva,#btn-top{display:none!important}}

2 curtidas

Pronto…perfect!
Deus lhe page meu fio…

:slight_smile:

#Ops

Errei em uma altura lá. Este está mais correto:

@media (max-width: 768px){#listagemProdutos > ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}#listagemProdutos > ul li.listagem-linha ul{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}#listagemProdutos > ul li.listagem-linha ul li{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:14px}.preco-produto .desconto-a-vista, .preco-produto strong.titulo{font-size: 11px !important}.preco-venda {display:block;font-size:12px !important;}}

11 curtidas

Atualizei, agora esperar os eternos 15 min… mas está ótimo mesmo se ficar assim!

Boa tarde Douglas,
apliquei no meu site e deu super certo,estava procurando por isso a muito tempo.
Muito obrigado amigo.

Ve se você pode me ajudar,no meu site tenho a categoria ‘marcas’ no menu e como estou cadastrando muitas marcas fica um coluna muito grande para baixo,será que você saberia botar ela pra formar colunas de 8 marcas e ai ir formando ao lado dela outra coluna com mais 8 marcas.
Não sei se deu para você entender muito bem o que eu quis dizer.

Vou te mandar um site onde tem isso para você entender melhor --> http://www.madrugaosuplementos.net.br

Se você ir ‘compra por marcas’ vai ver que tem esse efeito que estou procurando.

Segue o meu site para você dar uma olhada,fique a vontade se você ver algo que eu possa melhorar.
http://www.kdsuplementos.com.br

Muito obrigado mais uma vez

Boa noite Galera,

Primeiramente parabéns por essa atitude de todos na comunidade, a ajuda de vocês, principalmente dos Experts no assunto é de grande serventia para nós que não entendemos muita coisa hahaha

Vamos as dúvidas: @douglaswp @wolf

1- Gostaria de tira a função “meus pedidos” e deixar só “Minha Conta” como nesse exemplo, da mesma forma, com a letras um pouco maior, ao lado do carrinho.

2- Gostaria de saber como consigo colocar esse função “Central de atendimento”,achei muito foda, só que irei retirar o telefone porque eu só trabalho com Whatsapp, e ao invés de “Skype” irei colocar “SnapChat”, eu não encontrei nada relacionado nas comunidades. Com isso irei tirar a barra inicial com as funções fale conosco e telefone.
Exemplo - o site do nosso amigo @Wolf

3- Gostaria de saber como faço pra deixar a barra flutuante do jeito que estar o site @wolf, mas incluindo o “Carrinho” e “Busca”.

4- E por fim kkkk, eu gostaria de colocar o meu Logo centralizado, mas como vou pelo jeito tradicional LI, ele não fica totalmente centralizado, ele fica ao lado do campo busca, eu gostaria de deixar ele em destaque, totalmente centralizado.

Desde de já agradeço a ajuda, espero que não tenha pedido nada impossivel kkk.

meu site é: http://lojaiamfitness.lojaintegrada.com.br/

Aproveitar que estamos falando de mobile, primeiramente agradecer pelos códigos que você sempre disponibiliza aqui na loja, Já ajudou muita gente.

Bom, vamos lá: na versão mobile da minha loja, não aparece o calculo de frete no carrinho, apenas na página de produto. Existe algum código em que eu possa fazer isso, ou apenas entrando em contato com a LI?

Desde já agradeço.

Oi @douglaswp posso usar esse mesmo código em minha loja que da certo? www.lapitanga.com.nr

Acredito que sim @lapitanga.
Faça o teste, qualquer coisa nos avise aqui.

Provável que seja algo pra ser resolvido com CSS mesmo. Me passe a URL da sua loja que verifico.

Deu certo muuito obrigada! :slight_smile: Queria colocar imagens nas categorias do Menu, tem alguma personalização pronta que poderia me ajudar?

1 curtida