Align button on each event card

Ask the Community Customization
1

I want to aligne the button on each event. So to stretch at the bottom of the event card.

Is it possible?

2 Likes
3

Hi there and welcome to the Community, @Fany_Raymond :waving_hand:

Do you mean to make the buttons full-width?

image
image306×618 53.5 KB

1 Like
4

Hi Max, no in fact the ACTION button, I am not using it. It’s the LEARN MORE button when I put a full description.

2 Likes
5

Got it!

If you’d like the Learn More button to take the full-width of the event card, please add this code to the Custom CSS field on the Settings tab of your widget’s settings:

.es-event-card-buttons-wrapper {
  margin-left: -24px;
  width: calc(100% + 48px)
}

.es-action-button {
  width: 100%;
}

Check it out and let me know if you like the result :slightly_smiling_face:

1 Like
6

Yeah it’s not working, the button is full width and not at the bottom of the card.

2 Likes
7

To place the button at the very bottom of the card, please try to add one more CSS code :slightly_smiling_face:

.es-event-card-content-wrapper {
  padding-bottom: 0;
}
1 Like
8

Thanks Max! I don’t want the button to be dependend of the text lenght.

image
image697×146 13.9 KB

2 Likes
9

Ah, I am sorry about that!

Please add one more code to display all buttons at the bottom of the cards :slightly_smiling_face:

.es-event-card-buttons-wrapper {
  margin-top: auto;
}

.es-event-card-content-wrapper {
  height: 100%;
}
2 Likes