Create a border around EACH product in the product list

[Zen]

Hi.

I would like to create a border around each product in the product list.

I have an issue when i make the tittle of the product longer than 2 lines it leaves an empty space below the product as you can see in the image below.

I think that if i could place a border around each product it would solve the problem but i don't know how to do that.

Thanks in advance!.

 

[Rhobur]

try first by adding this:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis

to the li container declaration in product-list.css

[Zen]

 

9 hours ago, Rho_Bur said:

try first by adding this:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis

to the li container declaration in product-list.css

Thanks for the reply, but this doesn't help me because i need the product name to be fully vissible.Is there some other way to fix this?

Edited January 22, 2018 by Zen (see edit history)

[Zen]

I played around with the code and found a solution.

I created a block around each product and gave it the same color as the background so that people can't see it.

    position:  relative;
    height: 350px;
    display: block;
    border: 10px solid #ff000000;

 

Edited January 22, 2018 by Zen (see edit history)

[Mbbets]

Hi Zen.

I have the same problem with my shop. Can you please share more details so i have a chance to finde the lines in the css that i need to edit.
It would be nice if you could share the line numbers.

 

[Zen]

I dont know if anybody is still interested in this but here it is.

You have to add the following lines in the product.css . (You can add them anywhere. I usually add all my code at the very bottom of the file so that it's all easy to find.)

.lablistproducts > li    
    position:  relative;
    height: 350px;    /*this is gives all the products the same height. so now they should line-up*/
    display: block;