Imágenes versión Mobile

Jorge HernÃ¡n

Respuestas: 40

Eminent Member

Topic starter

Translate ▼

Muy buenas;

Tengo un problema con la gestión de imágenes de WordPress.
He intentado todo y no se cómo solucionarlo.

En mi web: www.xiaomicenter.es, quería que el tamaño de las imágenes en la versión mobile sean más grandes, ya que no ocupan el espacio total y se ven pequeñas.

En la versión de escritorio se ven perfectamente, pero en la de móvil no. Por ello no se muy bien cómo hacerlo. He intentado algo por CSS para que adapte el contenido, pero no logro que funcione.

Estoy colocando esto:

@media only screen and (max-width: 768px)
.woocommerce ul.products li.product .image-wrapper img {
width: 100%; !important;
height: auto; !important;
}

Pero no se si tengo que regenerar las imágenes o no para que tenga efecto o debo colocar otro código para que funcione.

Por otro lado, no me deja hacer zoom en mi versión móvil. No se si hay alguna manera de activar esto para que cualquiera pueda hacer zoom en las imágenes de la web.

Muchas gracias

Hernán

URL del sitio: Contenido solo visible a usuarios registrados

Respondido : 05/12/2018 12:16 pm

Pepe

Respuestas: 42217

Illustrious Member Admin

Translate ▼

Hola Jorge.

Las imágenes por defecto ya tiene una proporción del 100%, esto hace que la imagen se rediemnsione a las medidas de la diferentes resoluciones.

El tamaño de la imagen se acopla a el bloque que se muestra con ancho del 100% del bloque.
podrias poner una media exacta pero siempre se redimensionaria al tamaño máximo del bloque, es decir puedes poner " width: 1000px; !important; " y el tamaño de la imagen sera el máximo de ese bloque.

Sobre el código anterior, falta abrir y cerrar el @media con un corchete:

@media only screen and (max-width: 768px) {
.woocommerce ul.products li.product .image-wrapper img {
width: 100%; !important;
height: auto; !important;
}
}

Un saludo

Respondido : 05/12/2018 1:23 pm

Jorge HernÃ¡n

Respuestas: 40

Eminent Member

Topic starter

Translate ▼

Hola;

¿Entonces de qué manera podría modificar ese bloque para que pudiera funcionar la orden por CSS?
Ya que ahora no me funciona.

Muchas Gracias

Hernán

Respondido : 05/12/2018 3:05 pm

Jhon

Respuestas: 44954

Illustrious Member Moderator

Translate ▼

Hola

El cambio tiene que ser al contenedor principal, prueba agregando el siguiente código al final de tu archivo style.css

@media(max-width:768px){
    div.grid_section .section_inner{
        width:90%!important;
    }    
}

Saludos.

Respondido : 05/12/2018 5:40 pm