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;
}