If the attributes are 3, on hover the last one appears half

Hello,

I have a problem with the product attributes and how they appear on hover if they are 3.

The problem:
When I hover on the product tile, if there are more than 3 attributes on the product, the dots appear, and that is ok. But if the attributes are less than 3, then the last attribute appears as cut out. I have also added an image, so that you can check.

Let me know if you need anything else.

Best Regards

Hello,

It’s enough, thanks. The below code will help you to fix that cut of the text, enter it into the “Global Custom CSS” area that is in Theme Settings -> Custom CSS.

.product-grid-item .wd-more-desc {
    max-height: calc(var(--wd-text-line-height) * 3.4em);
}

Thanks for your time and have a great day.

Kind Regards

Hello,

Thank you for the response. Now it will show correctly, but if the product has more than 3 attributes and I click the extra dots, then it will show only the 3 attributes.

So let me know how this can be fixed.

Best Regards

Hello,

I got you, in this case, please enter the below code into the “Global Custom CSS” area as well.

.product-grid-item .wd-more-desc.wd-more-desc-full {
    max-height: none;
}

https://gyazo.com/d473ae810793fb81c3c1d9d3e792dbab

Keep me informed of any issues.

Kind Regards

[Author]

Posts