Diminuir o espaço do produto e Preço

Layout
1

Eu preciso diminuir a distância entre o produto e preço. Alguém consegue me ajudar por favor?

Tamanho
Tamanho551×931 114 KB

2

Esse espaçamento está sendo causado por um CSS que nós criamos:

@media screen and (max-width: 767px) {
    #listagemProdutos.listagem .listagem-item .info-produto, .listagem.aproveite-tambem .listagem-item .info-produto {
        min-height: 255px;
    }
    .slick-slide > div > div.info-produto > div {
        position: absolute;
        bottom: 0;
    }
}

Para diminuir você precisa alterar o valor desse min-height: 255px;.
Mas eu não me lembro qual foi a nossa ideia ao usar esse código.

2 curtidas
3

Boa noite José.
Eu fiz uma alteração no valor do comando. para ( 177Px)
Estranho que alguns itens ele altera o espaçamento e outros não.

comando
comando1322×233 26.9 KB
Imagem1
Imagem1561×987 112 KB
Imagem2
Imagem2561×1003 61.4 KB
Imagem3
Imagem3576×1024 87.4 KB

4

Acrescenta essa linha de código também:

#listagemProdutos.listagem .imagem-produto, #listagemProdutos.listagem .produtos-carrossel[data-produtos-linha] .imagem-produto {
        height: 150px;
    }

Deve ficar assim:

@media screen and (max-width: 767px) {
    #listagemProdutos.listagem .listagem-item .info-produto, .listagem.aproveite-tambem .listagem-item .info-produto {
        min-height: 177px;
    }
    .slick-slide > div > div.info-produto > div {
        position: absolute;
        bottom: 0;
    }

    #listagemProdutos.listagem .imagem-produto, #listagemProdutos.listagem .produtos-carrossel[data-produtos-linha] .imagem-produto {
        height: 150px;
    }
}
2 curtidas
5

Eu fiz umas alterações José. Mas o que eu acho estranho é que uma parte fica boa e outra nao. Vou enviar uns prints para você dar uma olhada.

comando1
comando11457×303 40.6 KB
Imagem1
Imagem1563×909 116 KB
Imagem2
Imagem2551×985 79.3 KB

6

Então faz outro teste apagando esse trecho.

1 curtida
7

Ficou legal José. Só o produtos: Rodas e camisetas que ainda continuam distantes.
Isso só acontece na versão Mobile.

8

Ainda tem vários códigos CSS que estão criando esse espaço todo. Tenta acrescentar essas linhas para vermos como fica:

    .listagem .listagem-item .nome-produto {
        margin-bottom: 0;
    }

    #listagemProdutos.listagem .listagem-item .info-produto .nome-produto, .listagem.aproveite-tambem .listagem-item .info-produto .nome-produto {
        min-height: 0;
    }

Vai ficar assim:

@media screen and (max-width: 767px) {
    #listagemProdutos.listagem .listagem-item .info-produto, .listagem.aproveite-tambem .listagem-item .info-produto {
        min-height: 150px;
    }  

    #listagemProdutos.listagem .imagem-produto, #listagemProdutos.listagem .produtos-carrossel[data-produtos-linha] .imagem-produto {
        height: 150px;
    }

    .listagem .listagem-item .nome-produto {
        margin-bottom: 0;
    }

    #listagemProdutos.listagem .listagem-item .info-produto .nome-produto, .listagem.aproveite-tambem .listagem-item .info-produto .nome-produto {
        min-height: 0;
    }
}
1 curtida
9

Agora ficou perfeito José. Muito obrigado. Mas eu vi que o comando mexeu em outro item.

foto
foto576×1024 82.1 KB

1 curtida
10

Ah, então era para isso esse código aqui. Ele alinha os preços a partir da parte inferior da caixa.

1 curtida
11

Vou voltar para fazer um teste José.

1 curtida
12

Eu inseri essa parte do comando. e alguns valores firam em cima do outro.

imagem
imagem548×702 108 KB

13

Rapaz, que negócio complicado. Vamos fazer o seguinte. Apaga todo aquele código que configuramos para ver qual é o padrão do seu tema.
Pode apagar todo esse trecho:

@media screen and (max-width: 767px) {
    #listagemProdutos.listagem .listagem-item .info-produto, .listagem.aproveite-tambem .listagem-item .info-produto {
        min-height: 150px;
    }  

    #listagemProdutos.listagem .imagem-produto, #listagemProdutos.listagem .produtos-carrossel[data-produtos-linha] .imagem-produto {
        height: 150px;
    }

    .listagem .listagem-item .nome-produto {
        margin-bottom: 0;
    }

    #listagemProdutos.listagem .listagem-item .info-produto .nome-produto, .listagem.aproveite-tambem .listagem-item .info-produto .nome-produto {
        min-height: 0;
    }
}
2 curtidas
14

Eu apliquei o comando José.
Porém o posicionamento continua desalinhado.

Desconfigurado
Desconfigurado547×975 126 KB

15

E colocando essa parte o alinhamento fica melhor?
Veja como fica com o código completo:

@media screen and (max-width: 767px) {
    #listagemProdutos.listagem .listagem-item .info-produto, .listagem.aproveite-tambem .listagem-item .info-produto {
        min-height: 150px;
    }  

    #listagemProdutos.listagem .imagem-produto, #listagemProdutos.listagem .produtos-carrossel[data-produtos-linha] .imagem-produto {
        height: 150px;
    }

    .listagem .listagem-item .nome-produto {
        margin-bottom: 0;
    }

    #listagemProdutos.listagem .listagem-item .info-produto .nome-produto, .listagem.aproveite-tambem .listagem-item .info-produto .nome-produto {
        min-height: 0;
    }

    .slick-slide > div > div.info-produto > div {
        position: absolute;
        bottom: 0;
    }
}
2 curtidas
16

O comando corrigiu a primeira página da parte das camisetas, porem nas páginas seguintes não. E a parte dos bonés continua desconfigurado. Eu entendo porque o tamanho do texto do produto tem uma diferença no tamanho também.

Ainda contiinua
Ainda contiinua672×1024 115 KB

17

Acho que o pessoal que fez o seu tema não fez esses testes com nomes de produto maiores, por isso que dá essa quebra no layout.
O jeito vai ser aumentar o valor desse código:

#listagemProdutos.listagem .listagem-item .info-produto, .listagem.aproveite-tambem .listagem-item .info-produto {
        min-height: 150px;
}

Para que os produtos com mais texto encaixem nas caixas. Depois nós vamos vendo caso a caso onde aparecerem erros no layout.

2 curtidas
18

José ficou legal. Porem ainda continua com um espaçamento.
Será que conseguimos melhorar essa distancia do produto e o preço?

imagem1
imagem1620×1024 80.4 KB
imagem2
imagem2605×1024 94.9 KB

19

É um pouco mais trabalhoso, mas podemos incluir uma regra no CSS específica para cada categoria:

    /*Altura dos preços das rodas*/
    .prod-cat-6826120 > div.info-produto {
        min-height: 110px !important;
    }
    /*Altura dos preços dos Buckets*/
    .prod-cat-9296552 > div.info-produto {
        min-height: 120px !important;
    }
    /*Altura dos preços dos Bonés*/
    .prod-cat-6971854 > div.info-produto {
        min-height: 145px !important;
    }
    /*Altura dos preços das Camisas*/
    .prod-cat-6826124 > div.info-produto {
        min-height: 135px !important;
    }

Aí aquele código vai crescer um pouco mais:

@media screen and (max-width: 767px) {
    /*Estabelece uma altura mínima para a caixa com o nome e preço dos produtos*/
    #listagemProdutos.listagem .listagem-item .info-produto, .listagem.aproveite-tambem .listagem-item .info-produto {
        min-height: 188px;
    }  
    /*Estabelece uma altura mínima para a caixa com a imagem dos produtos*/
    #listagemProdutos.listagem .imagem-produto, #listagemProdutos.listagem .produtos-carrossel[data-produtos-linha] .imagem-produto {
        height: 150px;
    }
    /*Retira a margem entre o nome do produto e o preço*/
    .listagem .listagem-item .nome-produto {
        margin-bottom: 0;
    }
    /*Alinha as informações do preço em relação a margem inferior*/
    .slick-slide > div > div.info-produto > div {
        position: absolute;
        bottom: 0;
    }
    /*Altura dos preços das rodas*/
    .prod-cat-6826120 > div.info-produto {
        min-height: 110px !important;
    }
    /*Altura dos preços dos Buckets*/
    .prod-cat-9296552 > div.info-produto {
        min-height: 120px !important;
    }
    /*Altura dos preços dos Bonés*/
    .prod-cat-6971854 > div.info-produto {
        min-height: 145px !important;
    }
    /*Altura dos preços das Camisas*/
    .prod-cat-6826124 > div.info-produto {
        min-height: 135px !important;
    }
}
3 curtidas
20

Agora ficou legal José. Muito Obrigado.

1 curtida