Modern events calendar & blog masonry animation

Hey Dan,
Thank you for your patience and the link to your site, I checked your page and the masonry element and the error seems to be caused by the Modern Events Calendar frontend.min.css and these 4 rules dealing with the class .isotope-item:

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

this conflict is because the plugin rule is not specific enough to not cause conflicts. It seems that the masonry layout in Modern Events Calendar is only available for the Pro version, you are only using the free lite version so it would be safe to remove these rules. I made this edit for you and cleared your cache plugin & Autoptimize plugin and now the page masonry is working correctly, you will need to clear your browser cache and then it should work correctly for you.

I will report this to our Dev Team, but I don’t think there is much we can do other than ask Modern Events Calendar to change their css rules. So for now keep the edit in mind if you update the plugin.

Best regards,
Mike

Hi,
Glad we were able to help, please see below, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike