Avisos
Vaciar todo
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
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
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
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
