+ Reply to Thread
Results 1 to 10 of 10

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

  1. #1
    Senior Member
    Join Date
    May 2014
    Posts
    182

    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?

    listings-uneven-height.png
    Last edited by Pricky; November 22, 2021 at 02:38 PM.

  2. #2
    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.
    Viktor,
    Flynax technical department,
    Best wishes.

  3. #3
    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.

  4. #4
    Senior Member
    Join Date
    May 2014
    Posts
    182
    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?

  5. #5
    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

    Screen Shot 2021-11-23 at 10.50.05 PM.png

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

  6. #6
    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
    Last edited by Chris Brown; November 23, 2021 at 05:11 PM.
    New Site: CameraSpecs https://bit.ly/3G4uYA6

    Old Site: MotorAdsUk

  7. #7
    Senior Member
    Join Date
    May 2014
    Posts
    182
    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?
    Last edited by Pricky; November 28, 2021 at 11:35 AM.

  8. #8
    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.
    Last edited by Chris Brown; November 28, 2021 at 12:28 PM.
    New Site: CameraSpecs https://bit.ly/3G4uYA6

    Old Site: MotorAdsUk

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

  10. #10
    Senior Member
    Join Date
    May 2014
    Posts
    182
    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.

+ Reply to Thread