I am having a problem with the appearance of products on my website. I have products with different word-counts in their descriptions. The ones with more words in their descriptions get pushed down from the rest of the products which make the page rather messy. I have tried a number of ways to solve the problem including making all images the same size but that didn’t help. So far, the only way I can keep them aligned is if all products have the same number of words in their descriptions. Any assistance on how to solve this problem?
Welcome to shopify community.
Please share your store URL and if your store is password protected then please provide password too.
Thank you.
Hi @Folake1 ,
You can follow the steps:
-
Step 1: Change so that the image is the same size.
-
Step 2: Go to Assets > component-card.css and paste this at the bottom of the file:
.collection .card__heading {
height: 35px;
}
.collection .card__heading .full-unstyled-link{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Title will display the same size and up to 2 lines. So everything will work fine
Thank you. The code fixed the problem on the " All Product " page but the problem is still there with recommended products on the product information page. The recommended products below the product information are not aligned.
Hi @Folake1 ,
Please change code:
.card__heading {
height: 35px;
}
.card__heading .full-unstyled-link{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Hope it helps!
I should change the code in Assets > component-card.css ? Do I delete the previous code before putting the new code?
Hi @Folake1 ,
Yes, you need to remove the previous code I showed and add the code in the following tutorial, it will work fine on all item product.
Hope it helps!
1 Like