Grid layout all the same height

Hi, is it posibil to make the grid layout everwere at the same height even there a no Reviews or pice etc.I would like to have the same height everywhere as the first product.

thx

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.products.align-items-start {
    align-items: stretch!important;
}

.website-wrapper .wd-hover-tiled .product-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.website-wrapper .wd-hover-tiled .product-element-bottom {
		flex: 1 1 auto;
    display: flex;
    flex-direction: column;
		font-size: 0;
}

.website-wrapper .wd-hover-tiled .price {
	margin-top: auto;
}

.website-wrapper .wd-hover-tiled .price,
.website-wrapper .wd-hover-tiled .wd-entities-title,
.website-wrapper .wd-hover-tiled .star-rating {
	font-size: 14px;
}

.slider-type-product .owl-stage {
    display: flex;
    align-items: stretch;
}

.slider-type-product .owl-stage .owl-carousel-item,
.slider-type-product .wd-hover-tiled {
	height: 100%;
}

Regards.

yea it will work but then stuff disapear.

Attachments:

You must be logged in to view attached files.

Sorry, what stuff do you mean? We don’t see any problems on your screenshots.

The Review counter disapear

We can show it only like shown on the screenshot https://prnt.sc/zZ3bHzDWYuah
Let us know if it is OK for you so we can give you a custom CSS code.

mhhh this is not what i wanted, is there no way around?

Try to wrap star reviews and count number with a single HTML tag like <div> and then we will try to prepare a new code.

what do u mean ?

You need to wrap these two elements in a single HTML tag like <div> in your custom code https://prnt.sc/69nyhE1uDvOn

Okay i hope this is better.

Attachments:

You must be logged in to view attached files.

Hello,

Try to replace the previous code with the following one

.products.align-items-start {
    align-items: stretch!important;
}

.website-wrapper .wd-hover-tiled .product-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.website-wrapper .wd-hover-tiled .product-element-bottom {
		flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
}

.website-wrapper .wd-hover-tiled .product-element-bottom > * {
	flex: 1 1 100%;
}

.website-wrapper .wd-hover-tiled .product-element-bottom .star-rating {
	flex: 0 0 auto;
	margin-right: 5px;
}

.website-wrapper .wd-hover-tiled .product-element-bottom .wrapper-reviews-number {
	flex: 0 0 auto;
}

.website-wrapper .wd-hover-tiled .price {
	margin-top: auto;
}

.slider-type-product .owl-stage {
    display: flex;
    align-items: stretch;
}

.slider-type-product .owl-stage .owl-carousel-item,
.slider-type-product .wd-hover-tiled {
	height: 100%;
}

Regards.

Thanks thats worked but now there is another problem. why its shown different?

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.wrapper-reviews-number {
	display: inline-block;
	margin-bottom: 5px;
	vertical-align: middle;
}

Regards.

Hi,

I insert the css code as instruction and everything was ok, but today after update of woodmart its show as before not in the same height, i need help to show the grid in the same height

best regards

Attachments:

You must be logged in to view attached files.

Hello,

You can enable the Even product grid option in Theme Settings -> Product archive -> Product styles instead of using custom code.

Kind Regards

Hi,

i have try this option but nothing change

best regards

Hello,

Please, create a separate topic and send us your admin access so we can check this for you.

Thank you in advance.

[Author]

Posts