Titles creating holes between products

Envato Customers Web and Code
1

Hello everyone,

I purchased the Sok theme by NanoAgency on themeforest (author not answering to any customer).

The problem is that when a product title is too long and uses more lines than the other products in the same row, the product beneath gets pushed to the next column, creating an empty block.

I tried solving this by reducing the products titles font size (which I’d prefer not having to do), but I can’t reduce it enough to prevent some titles to use 2 or 3 lines (depending on the browser width).

Is there a way to force the rows to have an equal height or some margin that would keep my products to stay in their place no matter the title lenght?

The page is http://f5supply.com/index.php/shop/
You will see what I am talking about by playing with your browser width.

Here’s a screenshot in case i’m not expressing myself clear enough : http://f5supply.com/pb_f5.png

I hope someone can help me with this as I really tried many things for days but can’t seem to find a solution…

Thank you for your time!

Best,

2

Hi @romaindep,

Please contact your purchased theme author, theme author will assist you.

How to contact an author to get support or for any technical query:

Thanks

3

Hello @mgscoder ,

Thank you for your swift answer.
The reason I am asking for help here is that the author is not responding to any mails (although I can see that he reads them).
He’s not answering to anyone in the “Comments” section of this themes.
The support site from the author is down and has been for months.

No one has heard from him in ages…

4

the following css will fix the product grid placement issues (add this css into your theme css file):

li.col-item.product .product-block.product.product-grid.inner-product-content {
   min-height: 420px;
}

Thanks

1 Like
5

@mgscoder
Thank you very much for responding so quickly and taking the time to check my issue!
I added the css but the holes are remaining : http://f5supply.com/F5pb2.png

Am I doing something wrong?
Sorry to bother you…

6

I have checked and found all is fine. Please clear browser cache and check. Thanks

7

@mgscoder Again, thank you for your time!
I have cleared my cache, I also tried with the incognito mode, on different browsers, and even with a different computer (from which I never accessed this website before).

The issue is still appearing when browser width is between 1401px and 1739px as shown on this gif: www.f5supply.com/f5_pb.gif

Yet, the css code you gave me is showing when I inspect the page… I’m completely lost.

8

please make:
min-height: 430px !important;

9

@mgscoder Thank you for trying with me again.

The min-height increase to 430px doesn’t work for me.
I tried with 440px and it fixes the problem on my 13" macbook screen.

But I have to go up to 500px when I use a larger screen if I don’t want this problem to display when reducing the browser height (otherwise the issue still there from 1476px to 1740px browser width).
And a min-height of 500px creates too much space between rows, in my opinion.
So i’ll try to find another approach to solve this - if my brain doesnt explode before.

It’s a shame the author is not answering…
Thank you for the time you took with me! I really appreciate it, I feel like I’m almost there thanks to your input :wink:

Have a good day!
Best,

10

In this case you have to use media query for large screen size and have to set min-heght accordingly.
Another solution it can be remove previous css and use this one:

li.col-item.product .product-block.product.product-grid.inner-product-content .caption-product .caption {
    height: 56px;
    overflow: hidden;
}

the above css will hide long title of the product will show only 2 lines of title text.

Thanks

11

this is working fine!