Como aumentar o tamanho das imagens dos produtos na versão mobile

[Zoman]

Olá pessoal, estou com dificuldades para aumentar o tamanho das imagens dos produtos na página inicial(home) na versão mobile, alguém poderia me ajudar?

o código que utilizei foi esse:

@media only screen and (max-width: 767px)
{ 
   .imagem-principal{
       width: 80%;
       height: auto !important;
   } 
    .listagem.com-caixa.listagem-item {
        border: 0px;
    }

       .imagem-produto{
         width: 100%;
         height: auto;
       }
       
      .conteiner {
      max-width: 100vw; 
  }
  
   }

O resultado que obtive até agora foi este aqui:

Gostaria de deixar da mesma forma em que aparece, na página de detalhes sobre o produto, ou pelo menos o mais próximo disso:

Meu site é este aqui: www.zoman.com.br

[plugoo]

Olá boa tarde, algo que pode ser feito é definir uma altura mínima para as imagens, e elas serão exibidas, estarei disponibilizando o código para que fique da forma mostrada no print:

Coloque-o na sessão de CSS

@media only screen and (max-width: 767px){
.tema-pequeno .listagem .span3 .imagem-produto {
min-height: 400px;
}
.listagem.com-caixa .listagem-item {
min-height: 400px;
}
}

[Zoman]

Olá, @plugoo tudo bem?

Realizei o teste do seu código, porém quando utilizo ele, ao invés de aumentar comente a imagem, todo o conteiner também é aumentado, ficando dessa forma:

Saber me dizer como eu poderia diminuir esse “espaço em branco” tanto em cima quanto em baixo?

Obrigado!!!

[plugoo]

Sim, para remover o espaçamento em branco adicione o código abaixo, eu o configurei para ficar desta forma:

@media (max-width: 768px){

.listagem .imagem-produto img {
position: relative !important;
top: -13px; /* para ficar sem borda alguma mude para -15px*/
left: -10px; /* para ficar sem borda alguma mude para -15px*/
min-width: 320px; /* para ficar sem borda alguma mude para -329px*/
min-height: 405px; /* para ficar sem borda alguma mude para -413px*/
}
}

Sem borda alguma ficaria desta forma:

[Zoman]

Bom dia @plugoo tudo bom? Acredito que o código tenha funcionado para versão mobile em que fez o teste, no meu celular por exemplo, as imagens ficaram muito maiores e acabaram invadindo a white-box:

vc sabe me dizer como eu poderia fazer isso de uma forma que ficasse com a mesma proporção em outras telas também?