Imagenes responsive...
Avisos
Vaciar todo

Imagenes responsive en las descripciones  

 
Israel
 Israel
Estimable Member

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

Citar
Respondido : 09/11/2016 7:27 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 09/11/2016 9:54 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Israel
 Israel
Estimable Member

Mil gracias, se soluciono.

¿Se puede hacer algo similar para los videos de youtube que ponemos?

Gracias

ResponderCitar
Respondido : 10/11/2016 10:16 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

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

ResponderCitar
Respondido : 10/11/2016 11:13 am

Cursos Gratuitos WordPress