How to fix home product grid product title spacing ( #2x Lines Space)

New Member
8 0 0

Hello,

I have slight concern about product collection display, which is not even depend on the product title number of lines.

When the product titles are with the same length, that looks fine as it’s should, however , if one of the titles is longer than the other that the case.

For example the product uses 2 lines grid display different (longer) than the one with 1 line, then the details that would have been underneath it is pushed down to the line below, Thus will have a gaps that looks awful and not even.

Need you support here to fix the grid base on the title for 2 line

Any help here! Thanks in advance!

0 Likes

Hi,

As I see, you added a fixed height:

<p style="height: 77px;">Modern Single Shoulder Bag</p>

Alternatively, you can add a class to this paragraph. Thereby the inline style will be removed. It will also be better to keep the styles in separate CSS files.

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
Shopify Partner
2 0 0

Arthur

I am using an older version of supply template and have the same problem. Shopify suggests updating to new version but we have had mods made for our wholesale customers. Can you explain a little more on adding a class to the paragraph.

TIA

 

Rick Simpson

0 Likes
Shopify Partner
2 0 0

Arthur

I am using an older version of supply template and have the same problem. Shopify suggests updating to new version but we have had mods made for our wholesale customers. Can you explain a little more on adding a class to the paragraph.

TIA

 

Rick Simpson

0 Likes
New Member
8 0 0

Hi,

the storefront page has been fixed after trying editing theme with below steps:

  • Assets>theme.js and search this line "

$gridImages.css('height', 'auto').equalHeights(this);   

  • Added this under the first line

$('.product-grid-image~p').css('height', 'auto').equalHeights();

But am still having this issue with product collection page ex. https://anazool.com/collections/all

0 Likes
New Member
8 0 0

Hi,

Support team have magenegd to solve the issue, i ll let know if o got any update about the fix.

0 Likes
New Member
1 0 0

Is there any solution for this problem yet?

0 Likes