Crocoblock Create listings with same height and content inline

Short Answer
have you created a listing and have noticed that the boxes have different heights due to the title or excerpt having different quantity of text. It looks ugly even though you toggle on the “equal height” on the listing widget. here is a simple workaround: Give your listing column a min height, align your contente to the top, give your title widget a min height of at least 2 lines, add css to your button to pin it to the bottom

I must have seen this question come up at least 20 times in the last month alone. Are you too having a hard time creating a listing with jetengine that looks good on the frontend and all listings have the same height? For some weird reason the “equal height” in the listing grid dosn’t do a good job and they still don’t look good. Here is a quick solution:

  • give your listing main column a minimum height (this should be the worst case scenario)
  • in the section general settings, align your content to the top (vertical alignment)
  • give your title a minimum height with some css, click on your title widget and go to advanced tab and then custom css and add: ” selector { min-height: 2.5em; } “ (play around with the em value if needed)
  • then add your content and here you should actually have a excerpt .. so either you have a dedicated field for the excerpt text with max 25-30 words or you use the inbuilt wordpress excerpt box
  • then you might have other content .. (price, terms etc)
  • and finally you might have your button which you would like to have pinned to the bottom of the box so it looks nice and tidy when all the boxes are next to each other .. here you will need some more css, again go to the advanced tab and then custom css and add: ” selector { position: absolute; bottom: 0; } ” this will pin it to the bottom .. you can play around with the bottom value if you want it to be higher up.

I hope this is helpful for you ;)

en_USEnglish

Questo sito fa uso di cookie per migliorare l’esperienza di navigazione degli utenti. Può conoscere i dettagli consultando la nostra privacy policy qui. Proseguendo nella navigazione si accetta l’uso dei cookie; in caso contrario è possibile abbandonare il sito.