How can i make all even height on listing box listings?

Hello, I'm having listing boxes (Recently Added) on homepage.

On the search page, its all the listings are in even height - https://bit.ly/3oPvR8b

but on homepage, Recently added listings are not even in height - https://bit.ly/30KurTW

Can somebody help me to fix the height issue for recently added listings?

Attachment 4415

Hi Pricky,

You can fix it yourself. As you can see on the Recently added box you have listings from different listing types. Also, each listing has a different set of fields. I see 4 4 2 5 fields If you set the same number of fields for each listing type it will solve the problem with height.

Yes above Viktor suggestion.
Or you can use a min-height css. But you will have blank space where their is no field on it.

Hello Viktor, I don't want to setup same number of fields for each listing type. It doesn't work for me.

(I don't know, how its working fine (Even height for all listings) on search page)


@Wei Hong, "min-height css" Can you guide me on how to work on this?

min-height means minimum height you set for listing box, let's say the tallest listing box is 165 pixel in height, but the other is 100, 120, 150 height for example. So you will set a css min-height of 165 pixel, then all of the other listing will be as least 165 pixel in height. Check the picture below

Attachment 4417

You will see I added a css code of min-height: 165px;

You can try and even them up better by adding min-height of about 90px, but its not 100% aligned, but deffo slightly better

Code:

---

Only registered members can view the code.

---

But the price field is making it abit more awkward. would need to change line-height of price to about 15px here

Code:

---

Only registered members can view the code.

---

Seems to work ok but you would have to try it and see if it effects the price field in other pages

Thank You, Wei Hong & Chris.

I applied Chris solution, but the price field getting into the bottom of the field box. And its also affecting all other listing, Min height should be for Listing Boxes Plugin only.

Applying Wei Hong Solution, it works. (All other listing pages not affected, because its only for this class ul.featured > li > ul)

And also the "Heart" icon not in line. (On the listing box plugin only, it has this problem & Listing/Categories pages, the heart icon shows correctly bottom rightmost corner.)

Any solution for fixing heart icon?

could try this

find:

Code:

---

Only registered members can view the code.

---

after add this: (hopefully will just effect the featured) also (added a title css to stop titles displaying on 2 lines as this would effect the height of the listing boxes and make them uneven again)

Code:

---

Only registered members can view the code.

---

The price will drop to the bottom because the icons are in the same ul class of the price, so to separate them the files/plugin would most likely need to be changed.

Like I said before just check other locations see if it effects anything. As I am just using inspect tool on your website, so can't really check all pages.

Can you tell us how do you want it to show? I'm not sure I'm following your words. Picture would be great.

Sorry guys, I don't think it will work good (height & heart icon) if i have multiple listing types on homepage listing boxes. There's height issue on similar listings if i alter the min height for featured listings.

I think its better to have only one listing type for recently added to avoid the height & icon issue with several listing types.

So, i enabled only marketplace listings for "Recently Added". Now its looks good.