Como alterar tamanho da imagem no mobile

Layout
1

Olá, bom dia!
Gostariade saber como deixar a imagens dos produtos maiores na tela proncipal do mobile.

8fe8a1ae-d9b0-46b5-8ce6-6652dbce1756
8fe8a1ae-d9b0-46b5-8ce6-6652dbce1756540×1140 44.7 KB

2

Fala Yuri, testa esse código aí.

@media only screen and (max-width: 767px) {
    .listagem .listagem-item .imagem-produto{
        height: 240px !important;
    }

       .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;
    }

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

Deu certo.
Mas será que consigo deixar a area das imagens quadradas? Está retangular horizontal como as imagens são quadras fica um pouco cortada.

4

Tentei e não consegui. Quais parâmetros vc usou? Rodapé, quais páginas, html? Agradeço as informações.

5

Tem que ser no editar CSS

6

Pra deixar ela sempre quadrada teria que mudar alguns detalhes.

@media only screen and (max-width: 767px) {
    .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;
    }
}
2 curtidas
7
  • Todas as páginas-
  • Tanto faz cabeçalho ou rodapé
  • css
2 curtidas
8

Estou usando esse código, fica perfeito na tela inicial porém na pagina de categorias fica todo desconfigurado, testei mexendo nos numeros de width: 100%;
height: 100% mas não resolveu, como consigo aruumar?

eff1ac5b-3037-4534-ae9c-19ba25c94c5f
eff1ac5b-3037-4534-ae9c-19ba25c94c5f540×1140 98.2 KB

9

Teste esse código:

@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;
    }
}

Eu até gravei esse processo mas foi tão rápido que nem agrega muita coisa. https://youtu.be/CdFStJwa4Ww

3 curtidas
10

Excelente isso mesmo.
Muito obrigado! Gratidão, já vou me inscrever no seu canal do You Tube rsr

2 curtidas
11

Valeu Yuri! Vou testar aqui.
Sou novo aqui cara, então estou tentando me adaptar, achar os campos…

2 curtidas
12

Deu certo Yuri! Imagens grandes no celular.
Mas na página, vista pelo desktop não aumentaram.

13

Obrigada por compartilhar seus conhecimentos. Me ajudou aqui também! Valeu!

1 curtida
14

Ola, obrigada a imagem realmente aumentou, mas o texto ficou longe da imagem, pode me ajudar ? Por favor

image

15

tente isso:

@media only screen and (max-width: 767px){
    #corpo .listagem .listagem-item {
        max-width: 100%;
        margin-bottom: 30px
    }
    .listagem .listagem-item .imagem-produto, 
    .listagem .listagem-item .info-produto {
        float: unset;
        width: 100%;
    }
    #corpo .listagem .listagem-item .imagem-produto {
        padding-bottom: 0%;
    }
}

image
image1185×891 146 KB

1 curtida