Como colocar o texto perto da imagem e aumentar o texto do preço

Layout
1

Aumentei a imagem no mobile na vitrine, mas em compensação o escrito desceu la pra baixo, tem como juntar mais o texto com a foto e deixar o valor de dourado maior? Obrigada

image

1 curtida
2

Vai em editar css e coloca esse código pra ver se resolve

@media only screen and (max-width: 767px) {
#corpo .listagem .listagem-item .imagem-produto.has-zoom {
    padding-bottom: 43%;
}
}
1 curtida
3

image

image
image949×469 72.7 KB

Para mobile resolveu mas no computador diminuiu muito as imagens :smiling_face_with_tear:

4

Copia esse e remove esse que tu colocou, eu fiz uma edição

5

Mudei para

@media only screen and (max-width: 767px) {
#corpo .listagem .listagem-item .imagem-produto.has-zoom {
padding-bottom: 100%;
}
}

E a imagem para desktop voltou a normal, mas o texto voltou a ficar longe da imagem no mobile

6

O código é esse

@media only screen and (max-width: 767px) {
#corpo .listagem .listagem-item .imagem-produto.has-zoom {
    padding-bottom: 43%;
}
}
7

Vou testar de novo, o que eu tinha colocado antes para aumentar a imagem da vitrine no mobile foi esse aqui, ele aumentou a imagem mas jogou o texto la pra baixo:

@media only screen and (max-width: 767px) {
.listagem .listagem-linha li .listagem-item,
.listagem .produtos-carrossel .listagem-linha li .listagem-item {
padding-top: 100%;
}
.listagem .listagem-item .imagem-produto{
height: auto !important;
padding-top: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}

   .listagem .listagem-item .imagem-produto img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.listagem .produtos-carrossel .listagem-linha li .listagem-item {
    margin: 0;
    padding: 0;
    padding-top: 100%;
}

/* Removendo a margem dos outros itens */
.listagem .listagem-linha li{
    margin-top: 0;
}

}

1 curtida
8

image

image
image933×454 89.1 KB

Deu certo, agora sim, o outro aumentou a imagem e o seu puxou o texto para perto. Obrigada :heart: :heart:

1 curtida