Pro Theme - Modern Events slider not rendering on Mobile

[sam_futr]

Hi Team

Have tried a few things (clearing cache, disabling cache, blocking js urls from cache etc etc) but to no avail…

The Modern Events Calendar slider I’m using on the landing page of one of my sites isn’t rendering when loading the site on a Mobile.

See here below for the render on Desktop:

And below the render on Mobile - just blank white space:

Site is:

The Osborne Rooftop & Bar | Restaurant & Functions | South Yarra

These seems to have started recently - could be related to the recent Pro theme update?

Any assistance with this would be greatly appreciated. Will send through admin credentials as well.

Thanks
Sam

[ruenel]

Hello Sam,

Thanks for writing in! There is a JS error on the page. This could be because of caching the minified JS and CSS files. Please deactivate any caching plugin like Breeze and disable the minified JS and CSS too. Clear all the caches and test your site again. You might need to use private browsing in your mobile phone’s browser.

Please let us know how it goes.

[sam_futr]

Thanks Rue - I’ll try this. But I’d eventually like the slider to render on Mobile with Breeze/caching activated.

Is there a better way for us to bypass js caching for the Modern Events slider?

Am I disabling Breeze/minification and clearing caches just for testing purposes?

Thanks
Sam

[ruenel]

Hello Sam,

Yes you will have to temporarily disable it for testing purposes. We need to figure out what or where the issue came from.

Please let us know how it goes.

[sam_futr]

Hi Rue

I can advise the slider is now loading on Mobile with Breeze cache disabled and the plugin deactivated as well.

Next steps?

Thanks
Sam

[paul.r]

Hi Sam,

Most plugins and theme’s css and js files already minified and sometimes minifying it again using a plugin causes issues like this.

Try to exclude the plugin’s css and js files from minification in Breeze Settings.

You can use Chrome developer tools to check for the plugin css and js files.

Hope that helps

[sam_futr]

Hey Paul

I tried removing the js originally - whilst still having the issue - this is what I added to the “Exclude js” section of Breeze:
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/packages/owl-carousel/*
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/packages/owl-carousel/owl.carousel.min.js?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/js/frontend.js?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/*

It looks from your screenshot though that I may have missed a few others ie. lity.min.js

I’ll try Excluding it’s CSS as well.

Thanks
Sam

[sam_futr]

Hi again Paul

I have added the following

Exclude css:
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/css/iconfonts.css?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/css/frontend.min.css?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/css/dyncss.css?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/packages/lity/lity.min.css?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/packages/owl-carousel/owl.carousel.min.css?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/packages/owl-carousel/owl.theme.min.css?ver=5.1

Exclude js:
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/js/frontend.js?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/js/events.js?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/packages/lity/lity.min.js?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/packages/colorbrightness/colorbrightness.min.js?ver=5.1
https://www.theosborne.com.au/wp-content/plugins/modern-events-calendar/assets/packages/owl-carousel/owl.carousel.min.js?ver=5.1

Cleared cache, cleared varnish, opened in Incognito - and now the slider isn’t loading on Desktop or Mobile.

Please assist.

Thanks
Sam

[paul.r]

Hi Sam,

I checked in Chrome Incognito and in mobile. It seems to be working fine on my end.

Did you change something in the settings?

[sam_futr]

Hey Paul

Yeah I removed ‘Group Files’ from the Breeze Cache:

Seems to have worked nicely.

However, those Exclusion URL’s should theoretically do the same thing… have reached out to Cloudways.

Cheers,
Sam

[paul.r]

Hi Sam,

Glad to know that worked.

Have a great day!