Reduce size of event card in grid layout

Ask the Community Customization
1

I’d like to reduce the size of the card component in the grid layout, thank you.

2 Likes
3

Hi there, @Benjamin_Yap and welcome aboard :waving_hand:

Please try to use this code in the Custom CSS field on the Style tab of your widget’s settings and let me know if you like the result :slightly_smiling_face:

.eapp-events-calendar-grid-item-component {
scale: 0.9;
}
2 Likes
4

Thank you for the quick response! Is it possible to scale it such that it will fill more cards per row if possible? Right now it shrinks the card but also makes the padding larger.

2 Likes
5

Please try to use this code instead and let me know if you like the result :slightly_smiling_face:

.es-grid-container {
  grid-template-columns: repeat(auto-fill, minmax(223px, 260px));
}
2 Likes
6

Thank you, that’s what I needed!

2 Likes
7

Perfect, you’re always welcome :wink:

1 Like
8

Hi Max,

I’m not sure if this is the case, but it seems like the CSS doesn’t change the size of the cards anymore. Changing the second px value under minmax doesn’t seem to affect the size of the cards and adding/removing the CSS code doesn’t make a difference either.

2 Likes
9

Hi there, @Benjamin_Yap :waving_hand:

Please try to use this code instead and let me know if it helped :slightly_smiling_face:

.eapp-events-calendar-grid-group .eapp-events-calendar-grid-component {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(223px, 260px));
  margin: 0 !important;
  gap: 24px;
}

.eapp-events-calendar-grid-item {
  width: 100% !important;
  padding: 0 !important;
}
1 Like
10

Thank you, this works!

1 Like
11

Great, you’re always welcome :wink: