Modern Events Calendar List View Modern Style No Longer Formatted Correctly

[NMWeb]

I use the Modern Events Calendar List View with Modern Style as a short code across dozens of sites.

Recently the formatting for all of them has gone wonky with the day names being cutoff:

I recreated the error in a brand new sandbox environment setup as a new WordPress install with Pro and the Pro Extension Modern Events Calendar installed. There are no other themes or plugins in the site so this appears to be an issue with Pro and/or Modern Events Calendar.

[prakash_s]

Hello @NMWeb,

Thanks for writing to us.

I checked your site it seems that it is working fine at my end. It might be the issue of browser cache at your end. I would suggest you please clear your browser cache and then check it again.

I would also suggest you please clear the style cache, Go to Dashboard —>Cornerstone—>Settings —>System —>Clear Style Cache.

Hope it helps
Thanks

[NMWeb]

Hi Prakash,

Thanks for looking into this. However it doesn’t appear to be a cache issue. It is occurring on all browsers I’ve tried on multiple devices, both private/incognito and normal mode, both Windows and MacOS, on various screen aspect ratios, event after I’ve cleared both the browser cache and the Cornerstone cache.

I’ve also had a half dozen clients report the issue. All of my coworkers are experiencing it as well.

So far you are the only person not able to recreate the error.

Personally I’ve tested in the following browsers (with cache cleared and in incognito/private mode):

• Chrome Version 99.0.4844.51
• Firefox Version 97.0.1
• Safari Version 15.3

I’ll include screenshots in a secure note.

[ruenel]

Hello @NMWeb,

I have checked and investigated the issue on my local install. I can replicate issue. This could be a bug in the latest release of the plugin. In the meantime, you can add this code in Cornerstone > Theme Options > CSS to temporarily resolve the issue.

@media only screen and (min-width: 768px){
    .mec-event-list-modern .mec-event-article {
        min-height: 220px;
    }    
}

Kindly let us know how it goes.

[NMWeb]

Excellent Ruenel, that worked great. Thanks!

[ruenel]

You are most welcome, @NMWeb.