Card element not resizing for contents

[tacitkalchal]

Hello,

I need the x-theme card elements to expand their height to accommodate text (much like the text elements do). Instead, their behavior is to let text overflow the element. How can I fix this?

The url where this is an issue is: https://fitlabdev.web.illinois.edu/wp/home/team/

[nabeel]

Hi Vinit,

Thank you for reaching out to us. I checked you page and it looks like you’ve added the custom CSS which is causing the issue. Please find and remove the following line of code:

 .x-card-faces {
    height: 400px;
    min-width: 170px;
}

By default the card resizes and expands according to the screen size, removing the above CSS will fix the issue. Let us know how this goes!

[tacitkalchal]

Oh yes, that fixes it, but now the cards size to different heights. I need them to all be a uniform height. How do I make them resize to the height of the largest card on this page?

It seems that this question has been asked multiple times in the forum, but with so many different solutions, it’s hard to tell what is the best one to do. Any help on this is greatly appreciated.

[ruenel]

Hello Vinit,

Each of the card elements are independent from each other. The height of each card depends on the amount of content you will insert. To know more about the card element, please check this out:

• https://theme.co/docs/card

To make sure that the card added in different columns will have the same heights, you can do the following:

• Make sure that each of the card contents will have equal amount of text contents. The same number of texts will result to almost the same height.

• Or use your custom css that you have previously removed. Just make sure that the you use the minimum height property, min-height: {value}. For more details, please check this out: https://css-tricks.com/almanac/properties/m/min-height/

Hope this helps.