Imágenes versión Mobile  

 
Jorge Hernán
 Jorge Hernán
Usuario eminente

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

Citar
Respondido : 05/12/2018 12:16 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 05/12/2018 1:23 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Jorge Hernán
 Jorge Hernán
Usuario eminente

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

ResponderCitar
Respondido : 05/12/2018 3:05 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 05/12/2018 5:40 pm

Cursos Gratuitos WordPress

Por favor Iniciar Sesión o Registro