• Priority: High
  • Status: Waiting on customer
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 16.10.20, 08:25
  • Opened by: Jerome Spanogeorges

Ticket #19461 - AMP - Same height item in grid products

Hello,

it is possible to always have the same height on item product ?

I have a gap at the button (see : https://epiceriedusud.fr/mobile/brand/11-mas-des-confitures)

Thank you

Comments

Fred 16 Oct 2020, 09:49

Hi, Jerome.
you have different titles what causes different height https://take.ms/Y98bp

you can try to set max height for titles with following CSS code

#productShownList .product-title {max-height:90px}
Jerome Spanogeorges 16 Oct 2020, 11:45

Thank Fred. But it's possible to add three dots at the end title if too long ?

Fred 16 Oct 2020, 11:50

I can make it only for one line of text but not for multiple lines

Jerome Spanogeorges 16 Oct 2020, 11:52

ok Thank you Fred, items products are the same size, this is the most important

Fred 16 Oct 2020, 11:55

try this:

.product-miniature .product-title {
display: block;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Jerome Spanogeorges 16 Oct 2020, 12:00

No work, it' a same result

Jerome Spanogeorges 16 Oct 2020, 12:01

I try this :

#productShownList .product-title {
 display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
}

But i don't like this.

Fred 16 Oct 2020, 12:04
Jerome Spanogeorges 16 Oct 2020, 12:07

How fix this ? With this code :

#productShownList .product-title {max-height:90px}

and

.product-miniature .product-title {
display: block;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Fred 16 Oct 2020, 12:07

I just added correct code into AMP Customer CSS

Jerome Spanogeorges 16 Oct 2020, 12:09

Oups, I had to make changes in the same time.

Fred 16 Oct 2020, 12:10

here is final code

.product-miniature .product-title {
display: block !imporant;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap !important;
}
Jerome Spanogeorges 16 Oct 2020, 12:15

It's no work with this solution. Ok,i have a three dots but the gird have one column and image is too big.

Attachments:

Fred 18 Oct 2020, 12:41

Yes, I see.
you can try this one to have one line

#productShownList .product-title {max-height:30px}
#productShownList .product-title:after {content:"..."}