espacios en blanco en los contenedores de producto

[goiko111]

Hola a todos

 

Agradecería cualquier tipo de ayuda.

 

El tema es que tras haber introducido todos los productos en mi tienda, me salen espacios en blanco entre los productos, es decir, como si estuvieran vacios.

Aqui se puede ver como en mi prestashop 1.6 en cualquiera de las páginas de productos, me salen contenedores de producto vacios.

 

http://babyinfantile.com/es/13-coleccion-nina#/page-4

 

Saludos y gracias

 

 

[ventura]

Busca esta parte en el archivo global.css  product-list.css o archivo principal de la plantilla que utilizas, no lo sé en concreto porque tienes comprimido el css y me aparecen los archivos del cache.

tu_plantilla/css/

Y deja esta parte asi

.product-block {
    background-color: transparent;
    padding: 0;
    position: relative;
    text-align: center;
    transition: all 0.4s ease 0s;
    overflow: hidden;
    min-height: 500px;
}

[goiko111]

Hola

 

Ante todo muchísimas gracias, hice el cambio en el global.css y funcionó a la perfección.

 

Me podrías explicar que es lo que pasaba?

 

Así venía my global.css antes de añadir tu cambio

 

.product-block {
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  position: relative;
  overflow: unset;
  background-color: transparent;
  padding: 0px;
  text-align: center; }

 

Saludos

GRACIAS

[princes]

Hola yo tengo el mismo problema he estado buscando por el foro pero no veo la solución.

 

Mi lista de productos esta en grid y algunas veces quedan espacios vacios entre producto y producto como si hubiese un producto invisible. La cosa es que no pasa en todas las categorias, solo en algunas. Uno de los productos aparece por arte de magia de mayor tamaño que el resto y eso descuadra todos lo demás apareciendo uno o dos espacios vacios dentro de la categoría. También pasa en los productos destacados del inicio. Y he observado que si cambio la forma de ordenar los artículos (por ejemplo de el más barato al más caro), el producto que se "agranda" cambia y es otro diferente.

 

He estado buscando en el global.css el .product-block { pero no tengo nada en el archivo que se llame así, supongo que será por la plantilla, en el mio trae .product_list pero no se que es lo que parte del código tengo que tocar, os pego aquí el código por si alguien sabe como puede hacerse. Gracias

.product_list.grid .content_price {  min-height: 42px;
}
.product_list.grid .product-image-container img {
  border-bottom: 1px dashed #dddddd;
}
.product_list.grid .product-desc {
  display: none;
}
.product_list.grid .button-container {
  margin-bottom: 10px;
  left: 0;
  visibility: hidden;
  position: absolute;
  top: 70%;
  z-index: 9999;
  padding: 0 16px 16px;
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 550ms ease 0s;
  transition: all 550ms ease 0s;
}
.product_list.grid .product-container:hover .button-container {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-box-shadow: 0 5px 4px -1px rgba(0, 0, 0, 0.16);
  box-shadow: 0 5px 4px -1px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  background-color: white;
  top: 100%;
  width: 100%;
  z-index: 9;
  visibility: visible;
}
.product_list.grid .product-container:hover .content_price .product-price.price {
  color: #eb557b;
}
.crimson .product_list.grid .product-container:hover .content_price .product-price.price {
  color: crimson;
}
.gold .product_list.grid .product-container:hover .content_price .product-price.price {
  color: gold;
}
.light-green .product_list.grid .product-container:hover .content_price .product-price.price {
  color: #83df83;
}
.salmon .product_list.grid .product-container:hover .content_price .product-price.price {
  color: #ff8274;
}
.turquoise .product_list.grid .product-container:hover .content_price .product-price.price {
  color: #00c9ae;
}
.product_list.grid .availability {
  position: absolute;
  top: -45px;
}
.product_list.grid .right-block {
  padding: 16px;
  padding-top: 0;
}
.product_list.grid h5 {
  height: 50px;
}
.product_list .product-container {
  background: white;
  position: relative;
  margin-bottom: 20px;
}
.product_list .product-container:hover {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
}
.product_list .product-container:hover .product-image-container .quick-view {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  left: 35%;
}
.product_list .product-image-container {
  display: block;
  text-align: center;
  padding: 16px;
  position: relative;
}
.product_list .product-image-container img {
  margin: 0 auto;
}
.product_list .product-image-container .quick-view {
  background: #383636;
  color: white;
  left: 0;
  top: 50%;
  position: absolute;
  padding: 5px 10px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.product_list .product-image-container .quick-view:before {
  content: "\f06e";
  display: inline-block;
  font-family: "FontAwesome";
}
.product_list .product-image-container .quick-view:hover {
  background-color: #eb557b;
}
.crimson .product_list .product-image-container .quick-view:hover {
  background-color: crimson;
}
.gold .product_list .product-image-container .quick-view:hover {
  background-color: gold;
}
.light-green .product_list .product-image-container .quick-view:hover {
  background-color: #83df83;
}
.salmon .product_list .product-image-container .quick-view:hover {
  background-color: #ff8274;
}
.turquoise .product_list .product-image-container .quick-view:hover {
  background-color: #00c9ae;
}
.product_list .product-image-container .quick-view-wrapper-mobile .quick-view-mobile {
  display: none;
}
.product_list .product-image-container .content_price {
  display: none;
}
.product_list .right-block {
  padding: 16px;
  position: relative;
}
.product_list h5 {
  margin: 0 0 10px;
}
.product_list .availability {
  display: inline-block;
}
.product_list .availability span {
  display: inline-block;
  color: #;
  text-transform: uppercase;
  font-size: 0px;
}
.product_list .availability span.available-now {
  background: #;
  color: white;
  padding: 0px 0px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.product_list .availability span.out-of-stock {
  background: #488c40;
  color: white;
  padding: 1px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.product_list .color-list-container {
  padding-top: 5px;
}
.product_list .color-list-container ul li {
  display: inline-block;
  border: 1px solid #dddddd;
}
.product_list .color-list-container ul li a {
  display: block;
  width: 23px;
  height: 23px;
  margin: 1px;
}
.product_list .comments_note {
  text-align: left;
  overflow: hidden;
  padding: 0 0 8px;
}
.rtl .product_list .comments_note {
  text-align: right;
}
.product_list .comments_note .star_content {
  float: left;
}
.rtl .product_list .comments_note .star_content {
  float: right;
}
.product_list .comments_note .nb-comments {
  margin-left: 10px;
  float: left;
  color: #ababab;
  font-size: 12px;
}
.rtl .product_list .comments_note .nb-comments {
  margin-right: 10px;
  margin-left: inherit;
}
.rtl .product_list .comments_note .nb-comments {
  float: right;
}
.product_list .product-desc {
  padding-top: 5px;
}
.product_list .content_price {
  padding: 6px 0 5px;
}
.product_list .product-flags .discount {
  display: none;
}

[ventura]

Con el overflow se controlan los elementos que no caben en un contenedor.Cuando no podemos la cantidad de contenidos en un contenedor se utilizada

overflow:hidden

Y se aplica un altura fija al contenedor con un valor que consideremos conveniente

min-height: 300px 

El nombre de la clase del contenedor puede variar según la plantilla que se esté utilizando. La que indicaba para en el post anterior era para la plantilla default de la version 1.6

.product-block

[princes]

Genial! muchas gracias ventura! he estado buscando y a base de prueba error ya lo he conseguido!

 

he añadido:

overflow: hidden;
min-height: 300px;

aqui:

.product_list .product-image-container {
  display: block;
  text-align: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
  min-height: 300px;

Muchísimas gracias!!     

[clds]

Muchas Gracias!! Llevaba tiempo buscando este problema por la web y no lo encontraba.

 

Te quería preguntar otra cosa también. En el recuadro donde tengo el producto, su altura varia según los caracteres del nombre del producto, es decir que si el nombre del producto es muy largo y ocupa dos lineas, el recuadro aumenta su tamaño, quedando diferente al resto. Existe alguna forma de que el recuadro se mantenga en un tamaño fijo, independientemente de la longitud de su nombre?

 

Gracias

[Nyx17]

Creo que tengo el mismo problema, también me aparecen en el listado de producto dentro de las categorías espacios en blanco.

Tengo la versión 1.6.1.4, como puedo arreglarlo:

 

 

Gracias.

Edited April 22, 2016 by Nyx17 (see edit history)

[Horticultura]

Me pasa lo mismo, pero tengo miedo de modificar los códigos ademas no se donde hacerlo ya que yo no hice la pagina :c

https://www.hortitecchile.cl/index.php

Edited February 7, 2019 by Horticultura (see edit history)