Jump to content

espacios en blanco en los contenedores de producto


goiko111

Recommended Posts

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

 

 

Link to comment
Share on other sites

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;
}
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...

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;
}
Link to comment
Share on other sites

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
  • Like 2
Link to comment
Share on other sites

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!!  :D  :D  :D

Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

  • 1 year later...
  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...