Modern Events Calendar - Shortcode Output Not Quite Right

[conorseed]

Hey team, I trust you’re doing well and having a great day

ISSUE:
I have multiple MEC shortcodes which display events from different categories. They’re all identical, except the category: Grid View, Classic, Count In Row (3), Limit (3), Load More Button (Yes). Everything displays fine when there are 3 or more events. However, when there are 1 or 2 events, something doesn’t output right - my guess is it doesn’t include a closing tag somewhere that it should. It means that the events are not clickable at all, and creates a gap at the bottom of the page between the orange section and the footer.

Here’s a page with 3 events: https://civilcontractors.co.nz/branches/northland-branch/
Here’s a page with less than 3: https://civilcontractors.co.nz/branches/bay-of-plenty-branch/

WHAT I’VE TRIED:

1. Disabling all other plugins - the issue remains.
2. The below jQuery hack, but it doesn’t seem to work - probably because I haven’t coded it right
   jQuery(function($){ console.log($('.mec-event-grid-classic .row').length); if($('.mec-event-grid-classic .row .col-sm-4').length < 3){ $('.mec-event-grid-classic .row').after(function(){ return '</div>'; }); } });

I’d appreciate any help you can give! Thanks for your time.

[paul.r]

Hi,

To fix it, you can try adding the code below in Theme Options > CSS

.x-container.max {
    clear: both;
}

Thanks

[conorseed]

Thanks @paul.r. That seems to have fixed it for now

[ruenel]

You’re most welcome.
If you need anything else we can help you with, don’t hesitate to open another thread.