Avisos
Vaciar todo
Hola, resulta que tengo algunos productos con imagenes en las descripciones y no las adapta al movil. ( http://prosoundcenter.com/pioneer-ddj-sz)
Me he fijado que añadiendo la clase img-responsive a cada imagen me la adapta bien, pero claro, esto ya es un follon a la hora de meter un producto (se podría hacer) pero claro para los que ya tengo metidos ir uno a uno para modificar las clases de las imagenes...
Probé a añadirlo al CSS de mi plantilla (es la que viene por defecto) pero o no se hacerlo o no lo coge.
También probe a añadir un codigo que vi por este foro
img{
max-width:100%;
height:auto;
}
Pero lo mismo o no se ponerlo o no lo coge.
¿Hay alguna manera para que todas las imagenes que ya están en las descripciones (y las futuras) sean responsives?
Gracias
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 09/11/2016 7:27 pm
Hola
Prueba con el siguiente código CSS:
.page-product-box center img{
max-width:100%;
height:auto;
}
Puedes agregarlo al final del archivo :
/themes/default-bootstrap/css/global.css
Refresca tu navegador para ver los cambios.
Saludos.
Respondido : 09/11/2016 9:54 pm
Mil gracias, se soluciono.
¿Se puede hacer algo similar para los videos de youtube que ponemos?
Gracias
Respondido : 10/11/2016 10:16 am
Hola Israel.
Tienes que realizar alguna modificaciones más:
.- Añade el siguiente código al archivo global.css
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Una vez tengas esto para incrustar un video de youtube tienes que envolverlo dentro de un div con el estilo que le indicamos anteriormente, seria algo parecido a esto:
Como vera se envuelve el iframe con un div y la clase que creamos anteriormente ' <div class="videoWrapper"> '
Un saludo
Respondido : 10/11/2016 11:13 am
