Change height of listing card

[hernanyveiga]

Is there a way to make the cards the same height in the Rentalhive theme?

I already tried these snippets I found here but none of them helped.

.hp-listing--view-block .hp-listing__image img {
    display: block;
    width: 100%;
    height: 350px;
    object-fit: cover;
}


add_filter(
	'hivetheme/v1/image_sizes',
	function( $image_sizes ) {
		$image_sizes['portrait_small']['height'] = 400;
		$image_sizes['portrait_small']['width'] = 400;

		return $image_sizes;
	}
);

[andrii]

Hi,

Unfortunately, there is no easy way to resolve the same block height issue because listing content height may be different ( as it also depends on the title, attributes, rating, etc. ).

[hernanyveiga]

For those that might be looking for a solution I think I came up with one. I’m no CSS expert so feel free to modify it to your liking and post here if you come up with something better.

@media only screen and (max-width: 600px) {
	article.hp-listing-category.hp-listing-category--view-block {
		height: auto;
		padding-top: 15%;
 }
}

@media only screen and (min-width: 601px) and (max-width: 767px) {
	article.hp-listing-category.hp-listing-category--view-block {
		height: 20rem;
		padding-top: 35%;
 }
}

@media only screen and (min-width: 768px) and (max-width: 900px) {
	article.hp-listing-category.hp-listing-category--view-block {
		height: 20rem;
		padding-top: 75%;
 }
}

@media only screen and (min-width: 901px) {
	article.hp-listing-category.hp-listing-category--view-block {
		min-height: 20rem;
		max-height: 24rem;
		padding-top: 75%;
 }
}

 @media only screen and (min-width: 600px) and (max-width: 900px) {
	.hp-listing-category__name {
		font-size: 1.35rem;
 }
}

/* Remove listing category description */
.hp-listing-category__description {
	display: none;
}

[quickbzz2024]

Hi everyone,

I’m working on customizing my HivePress site and I’m trying to make each listing column the same height, regardless of the content inside. Here’s my setup:

I have listings displayed in a grid layout, with each listing contained in a .hp-grid__item element. I tried setting display: flex on the parent container (.hp-grid) and height: 100% on each .hp-listing item to make them equal in height, but it’s not working as expected. Here’s the code I’ve used so far:

.hp-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.hp-grid__item {
    flex: 1 1 25%;
    box-sizing: border-box;
    padding: 10px;
}

.hp-listing {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.hp-listing__content {
    flex-grow: 1;
}

I’d prefer CSS-only solutions, if possible, but I’m open to minor template changes if needed.!

[andrii]

Hi,

Please check the solution in this topic.

[Phero]

Hello,

how to keep all the “hp-listing–view-block” at the same size even if the ad has more or less text.

thanks in advance

[condorito.fr]

Try this :

/*add this to your CSS */
.hp-listing__content {
    height: 285px; /*adjust height to your needs */
}

[andrii]

Hi,

Please check out the solutions in this topic. You can add a CSS snippet using this documentation: How to add custom code snippets - HivePress Help Center

​I hope this is helpful to you