Avisos
Vaciar todo

Al cambiar el tamaño de las imagenes, no caben dentro del box de mi pagina  

 
Juan Manuel
 Juan Manuel
Usuario experto

Hola comunidad !
Quiero comentaros un problema que tengo en la modificacion del tema classic de prestashop. Se que hay que modificar codigo para solucionarlo pero saber cual de ellos se me va un poco de las manos.
He cambiado el tamaño de mis imagenes ( principalmente home-default ) y todo va bien, pero resulta que ahora el tamaño del producto se sale fuera de los margenes de su " espacio ", adjunto imagen. ¿ me podriais decir que el codigo css que debo modificar para que se ajuste y se quede en su sitio ?

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 25/09/2017 12:37 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola José Manuel.

Puedes cambiar el tamaño de las imágenes pero luego tendrás que adaptar la caja donde se muestra las imágenes de los productos para que se adapte.

Prueba añadir lo siguiente a tu archivo :

.product-miniature img {
  max-width:60%;
}

Puedes cambiar los tamaños por defecto de las imágenes si accedes a Preferencias -> Imagenes

Si optas por esta ultima opción acuérdate que tienes que regenerar las imágenes, en la misma pagina al final veras el botón para regenerarlas:

Un Saludo

ResponderCitar
Respondido : 25/09/2017 2:20 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Juan Manuel
 Juan Manuel
Usuario experto

Gracias por su respuesta,
¿ Donde debo añadirlo ? ¿ En theme.css ?
Si es ahí donde debo añadirlo, actualmente lo está y no surge efecto. el producto sigue siendo mayor que la caja

ResponderCitar
Respondido : 25/09/2017 2:38 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan Discúlpame que antes te cambie el nombre :ohmy:

Veo que si se modifico:

Es posible que sea por cache, si ves que en algún momento no te funcionan las modificaciones, recarga la pagina con la tecla ( f5 ) para que recargue la cache.

¿ Esta solucionado y podemos cerrar la entrada ?

Un saludo

ResponderCitar
Respondido : 25/09/2017 4:07 pm

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

Juan Manuel
 Juan Manuel
Usuario experto

Perdone por la torpeza mia, justo en el momento que usted comprobaba mi web yo estaba haciendo de nuevo los ajustes... pero sigo con el problema como le dije en el mensaje anterior. Introduje el codigo que usted me proporciono en theme.css y sigue todo igual.
Puede comprobarlo de nuevo en mi web.

ResponderCitar
Respondido : 25/09/2017 4:30 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan.

Edita el archivo custom.css que encontraras en themes/classic/assets/css/custom.css y añade lo siguiente:

.product-miniature img {
    max-width: 60%!important;
}

Lo que no entiendo es por que quieres modificarlo si antes se veía bien.

Si empiezas a realizar modificaciones de tamaños o celdas de tu web, poco a poco empezaras a reportar errores por otros sitios ya que igual lo que modificas en una parte de la web, para otra sección puede que no sea bueno.

Piensa que muchos códigos y mas los de tamaños, son globales y afectan a otras partes de tu web.

Un saludo

ResponderCitar
Respondido : 25/09/2017 5:24 pm

Cursos Gratuitos WordPress

Juan Manuel
 Juan Manuel
Usuario experto

Hola de nuevo.
He seguido tus pasos y el codigo funciona, pero no a la perfeccion.
Está claro que si dejo el tema tal los productos se ven bien como usted dice, pero mi intencion era cambiar el tamaño de las imagenes home-default ( 250px 250px ) a el tamaño que yo deseo de 350px 525px.
Cuando hago este proceso y regenero las imagenes, el producto no cabe en su caja, como te demostre en el adjunto.
Al modificar el archivo custom.css como usted me dijo, el producto si cabe dentro de su caja ( aunque pisando un poco las palabras " todos los productos ") pero su tamaño disminuye respecto al que yo deseo.
Debe de haber otra solucion que adapte el box de los productos a ellos sin que las medidas de mis imagenes varien ya que en otros temas las utilizan.

ResponderCitar
Respondido : 25/09/2017 5:58 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan.

Ok, lo que quieres es que la caja se adapte a la imagen, no la imagen a la caja.

Añade lo siguiente al archivo custom.css que encontraras en themes/classic/assets/css/custom.css

#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {   
    height: 640px;
    width: 370px;
} 

Un saludo

ResponderCitar
Respondido : 25/09/2017 6:52 pm

Juan Manuel
 Juan Manuel
Usuario experto

Perfecto!! solucionado el tema.
Solo me queda saber si en la versión movil puedo visualizar los productos como si no fuese hecho ninguna modificación y aun tuviese home-default en 250px250px ya que ahora la imagen aparece casi a pantalla completa y me gusta mas como viene de forma predeterminada.
Para bien decir que esta modificación que hemos realizado no influya en la versión movil

ResponderCitar
Respondido : 25/09/2017 8:18 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba envolviendo el código en un media query, es decir

@media (min-width:768px){
	#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {   
	    height: 640px;
	    width: 370px;
	}	
}

El código sólo tendrá efectos para tamaños de pantalla > 768px

Saludos

ResponderCitar
Respondido : 25/09/2017 11:28 pm

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

Juan Manuel
 Juan Manuel
Usuario experto

Hola,
He situado el codigo que me proporcionaste en custom.css y en la version web no hay cambios, pero sin embargo en la version movil lo estropea, no sirve.
Adjunto una imagen de como deberia de verse en la version movil, y ustedes podeis ver como queda en mi web.

ResponderCitar
Respondido : 26/09/2017 12:52 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan Manuel.

Añade lo siguiente:

@media (max-width: 768px) {
  #products img, .featured-products img, .product-accessories img, .product-miniature img {
    
      height:400px

}
 	#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {   
	    height: 475px;
	    width: 300px;
	}
}

Un saludo

ResponderCitar
Respondido : 26/09/2017 12:19 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Juan Manuel
 Juan Manuel
Usuario experto

GENIAL ! todo está quedando tal y como deseaba.
Si os fijais tanto en la version web como en la version movil, tanto en la parte superior como en la inferior sale como un margen en la imagen, tambien en la vista previa y en la pagina de producto.
He probado con margin-top y algo mas pero nada surge efecto, y no tengo ni idea de a que de debe.
¿ se puede hacer desaparecer ese margen ?

ResponderCitar
Respondido : 27/09/2017 2:29 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Te refieres a este espacio en blanco?

Parece tratarse de la propia imagen que tiene dicho margen:
Contenido solo visible a usuarios registrados

ResponderCitar
Respondido : 27/09/2017 3:00 am

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