Avisos

Vaciar todo

Imagenes responsive en las descripciones

Summarize Topic

Preguntas sobre PrestaShop

Último Mensaje por Pepe hace 9 años

4 Respuestas

3 Usuarios

0 Reactions

1,126 Visitas

Israel

Respuestas: 112

Estimable Member

Topic starter

Translate ▼

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

Jhon

Respuestas: 44954

Illustrious Member Moderator

Translate ▼

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

Israel

Respuestas: 112

Estimable Member

Topic starter

Translate ▼

Mil gracias, se soluciono.

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

Gracias

Respondido : 10/11/2016 10:16 am

Pepe

Respuestas: 42202

Illustrious Member Admin

Translate ▼

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

46 Foros
81.2 K Temas
486.8 K Respuestas
7 En línea
9,359 Miembros

Iconos: No hay posts sin leer Hay posts sin leer

Iconos de los Temas: No respondido Respondido Activo Popular Fijo No aprobados Resuelto Privado Cerrado