Hi,
I’ve added Listing Categories as a block on my home page as outlined in the ExpertHive tutorial video. COLUMNS = 3 and NUMBER = 6. Each one of the categories I’ve added has a decription of varying length, meaning that columns end up being a range of heights and it looks messy. Is there any way to make the columns the same height?
Thanks.
Hi there.
Try setting all the category blocks to display flex in CSS and the parent grid item as well, that did it for us as it makes blocks in the same row have the same height.
It works for blocks in any hp-row
.hp-grid__item {display: flex !important;}
.hp-listing-categories .hp-listing-category--view-block {display: flex !important;}
Before
After
Thanks so much! That does make the columns equal (yay!), BUT it also brings the text up beside the icon and makes it look squished. Any ideas how to fix that?
becomes this:
Thanks, Andrii. That doesn’t quite work for me unfortunately. It ends up looking like this (description text is gone and icon and title moved to the bottom):
Was just about to reply with, except for the block in sliders, as they do the same I see. Don’t know what other CSS I changed as it was a while back, so I need to backtrack on the text beside the icon and squished I see. But let me work through the topic Andrii posted and see if its an easier fix.
@ Rohag Please let us know in here if you manage to sort your blocks out.
@ Andrii THANKS, I must just add he’s super patient with me on the custom development Team HP has done for us and will still be doing more for us soon.
I can really recommend Team HP’s newly added customization services.
I see I can only change my profile pic and not my username in the community, I’m developing for Munchies4U just in case you don’t know who I am to link me to the custom development Team HP has done/is doing for us. 
@ Rohag
You posted your reply as I was typing the previous, so I know it hasn’t quite worked for you.
Let me try it and if I have the same problem I’ll backtrack on what I did in the CSS as I noticed yesterday that I need to still get the blocks in the sliders to have the same height.
So check back here tomorrow for a possible solution to what I’ve done. 
I think I fixed it with a small update to your CSS code:
.hp-grid__item {display: flex !important;}
.hp-listing-categories .hp-listing-category–view-block {display: flex !important; flex-direction: column;}
And for anyone who is as web/Wordpress development illiterate as me, I copy and pasted that on the Wordpress admin side here:
Appearance > Customize > Additional CSS
@ Rohag Thanks for the update! Will check it out quickly on our side.
Have you not created a child theme and placed all your custom CSS in its style.css?
I find it a lot easier as then all the custom CSS code is in one easy to access place and I can order things properly.
@Munchies4U I think you are overestimating my abilities 
…I really have no clue what I’m doing.
For what is it worth, I improved my previous code. The last iteration I posted had some unnecessary code (I think) and also made the mobile display flex on the homepage in an unappealing way, and also made the listings on services page flex too. The code below fixed the my original problem and the mobile homepage display problem but created the undesirable service listing page flex (could’t solve that, so it be amazing if someone could figure that out).
@media screen and (min-width: 800px)
{.hp-grid__item {display: flex;}}
Here’s another solution that solves my original issue without affecting anything else. The min-height is adjusted for size of the largest of my 6 listing category descriptions.
@media only screen and (min-width: 901px) {
article.hp-listing-category.hp-listing-category–view-block {
min-height: 32rem;
}
The last potential solution I have is just to remove the descriptions from the listing categories completey just leaving the titles and icons as follows:
.hp-listing-category__description {
display: none;
}
Hi,
We have changed your nickname to Munchies4U .
Thanks Andrii! Now Team HP will be able to identify me with the Custom developments done for us.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
