Is it possible to make containers the same height?

Ask for Help
1

Is it possible to make containers the same height as per the below image, when it’s set as a card design it auto creates the height based on the length of content inside the card. I just want them to be the same container height on each row.

image
image1299×503 86.2 KB

1 Like
2

Have you tried adding spacers inside the shorter container (separator with no line)?

3

Yea but the text length is different in each item, so a spacer would still affect the length as it is a custom collection

1 Like
4

This happens because of the responsive nature of Glide; it can only be solved by using CSS with a fixed height.

1 Like
5

Thanks, do you know what the css would look like? And can it be targeted to a custom collection? Thanks!

6

Try this …

[data-testid="cc-card"] {
  height: 250px;
}

If it doesn’t work. Can you show me your component layout so I know which ones you want to target.

I found your old thread and I compiled it here:

.items div[class*="max-size-2xl"] > div:first-child {
margin-top: 0px;
}
.items div[class*="max-size-2xl"] > div:first-child div {
--container-x-pad: 0px;
border-radius: 12px 12px 0 0;
}
.items .aspect-container img {
border-radius: 12px 12px 0 0;
height: 250px;
}

/*New additional code*/
.items [data-testid="wire-component-stack"] > div > div > div{
height: 500px;
}
2 Likes