Getting all the cards even on mobile devices

Support
#1

My cards appear even and then the middle one becomes too long on some screens.


How can I ensure that they all match. ie enough space to fit all text variations

#2

Hi There,

Thanks for writing in! Upon checking, it looks similar in the mobile devices as well (https://snag.gy/oSFgqL.jpg). Could you please post a screenshot of your issue on mobile, so that we can check.

Thanks!

#3

https://monosnap.com/file/sL2tKIa37n9jp08QvEEW6xjBlem5tv

ignore the lost screen at the start :wink:

#4

Hi there,

This behavior is to be expected because the height of the card elements change accordingly to the display width which depends on the content inside each card.

Since the title and the text content of the middle card element is longer than the other cards, the title collapses to two lines at some screen width which causes it to be longer than the rest.

A workaround would be to create media query targeting the specific display width where the middle card element goes longer and setting the height of all the card element titles to a specific height where they will be equal.

The class selector to target the card element title should be .x-card-outer .x-face-title.

Hope this helps.

#5

Thanks for that:grinning:

#6

You’re welcome.