How to change the number of events per row on events calendar?

Ask the Community Customization
1

I am using an events calendar but set the number of events per row.

This was mentioned in another post by someone from October 2023, but nothing changed since then, no updates.

Page with widget: William Hanson | Events

1 Like
3

Hi @John-Paul :wave:

Could you please specify the number of events you’d like to display in a row?

4

3 per row (desktop only) at full width.

5

Right now, you have custom width: 2000 px:

image
image326×667 7.24 KB


Just to clear things up, do you want to switch Custom Width to Full Width mode, or you just would like to evenly place the events in the widget’s container?

6

I thought I had set that back to Full Width. But yes, I want the calendar to be stretched to Full Width.

I assume that this ‘width’ will then fill however the code block section I can stretch out on the Squarespace page.

1 Like
7

If you want to keep the current width and display 3 events in a row, please add this code to the Custom CSS field on the Appearance tab of your widget’s settings:

@media(width >= 1070px) {
  .eapp-events-calendar-grid-item {
  width: 33%!important;
}
}

In case you’d like to stretch the widget to full width, add one more code to the Custom CSS field:

.global-styles, .fluid-engine:has(.elfsight-app-d7c371e2-d11c-4fe1-bd8e-8bb245d72010) {
  display: contents;
}

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

8

Works nicely, thank you so much!

1 Like
9

It’s my pleasure :wink:

If anything else comes up, we’ll be delighted to help!