Equal height rows

This support ticket is created 4 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: How to build a site with Toolset, Views plugin

This topic contains 3 replies, has 2 voices.

Last updated by Christian Cox 4 years, 11 months ago.

Assisted by: Christian Cox.

Author

Posts

December 11, 2019 at 11:19 am #1405565

stewartE

Hi, I have created a view which uses a Bootstrap (4) grid to display content. The issue is that the height is slightly different for each item in the grid (due to their being a different length of content in each item).

Is there any way to force all the columns to be equal height?

Thanks

December 12, 2019 at 3:37 pm #1407137

Christian Cox

Hi, you might be able to achieve this by adding the CSS classes d-flex and flex-row to each row. It depends to some extent on how your grid is set up. May I see this in the browser? I might be able to make a better suggestion.

https://getbootstrap.com/docs/4.4/utilities/flex/#wrap

December 18, 2019 at 1:31 pm #1414805

stewartE

Thanks Christian! - it's just a standard Bootstrap grid of custom posts. If you look at the screenshot you can see that if the title is longer in some of posts it pushes down the height of that individual grid item.

December 18, 2019 at 5:38 pm #1415131

Christian Cox

Okay thank you for the screenshot, but I really need to see the actual results in a browser. There are tools I can use to examine the other CSS and HTML on the page, which can influence the design and layout here. Please provide a URL so I can see this in the browser.