Grid layout all the same height

This topic has 17 replies, 3 voices, and was last updated 2 years, 5 months ago by Artem Temos.

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
March 9, 2022 at 7:44 am #358991

Noahroeschard
Participant

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.

March 9, 2022 at 10:07 am #359084
Artem Temos
Keymaster
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.
March 9, 2022 at 10:20 am #359098

Noahroeschard
Participant

yea it will work but then stuff disapear.

Attachments:
You must be logged in to view attached files.

March 9, 2022 at 10:25 am #359107

Artem Temos
Keymaster

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

March 9, 2022 at 10:26 am #359108

Noahroeschard
Participant

The Review counter disapear

March 9, 2022 at 10:45 am #359116

Artem Temos
Keymaster

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.

March 9, 2022 at 11:03 am #359124

Noahroeschard
Participant

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

March 9, 2022 at 1:01 pm #359173

Artem Temos
Keymaster

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.

March 10, 2022 at 8:50 am #359411

Noahroeschard
Participant

what do u mean ?

March 10, 2022 at 9:04 am #359421

Artem Temos
Keymaster

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

March 11, 2022 at 10:09 am #359853

Noahroeschard
Participant

Okay i hope this is better.

Attachments:
You must be logged in to view attached files.

March 11, 2022 at 11:05 am #359878
Artem Temos
Keymaster
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.
March 14, 2022 at 4:58 pm #360733

Noahroeschard
Participant

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

Attachments:
You must be logged in to view attached files.

March 15, 2022 at 11:05 am #360968
Artem Temos
Keymaster
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.
June 8, 2022 at 11:56 am #381882

4putrat
Participant

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.

June 8, 2022 at 12:21 pm #381887

Artem Temos
Keymaster

Hello,

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

Kind Regards

June 8, 2022 at 1:05 pm #381895

4putrat
Participant

Hi,

i have try this option but nothing change

best regards

June 8, 2022 at 2:06 pm #381907

Artem Temos
Keymaster

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