Calendar Only Shows 6 Days on Mobile Version, Table Cut Off

[Casey]

John,
Yes, jquery-resize is being loaded by our plugin, but often times there can be conflicts with other javascript that is loaded by third-party plugins, which is why I was asking you to go ahead and try that troubleshooting step of deactivating other plugins.

Events Calendar PRO uses a combination of Javascript and CSS to switch to “responsive mode” when displaying at a width of less than 768 pixels. So, we really need to get to the bottom of this javascript error in order to resolve things.

Are you seeing those same errors on this staging site? http://bestofnj.staging.wpengine.com/events/month

Yes I am. Can you again try deactivating all other plugins on the staging site (and leave them deactivated), so I can check for conflicts? I suspect it might be something going on with Jetpack, but I’m not 100% sure what the culprit might be.

I also see that you’re running the Canvas theme, which has had many compatibility problems with other users (see this thread), so it’s quite possible that there is some conflicting javascript in the theme, which is causing the responsive issues. If that’s the case, then you might need to reach out to the theme developer to troubleshoot further.

Just let me know when you’ve got all of the other plugins deactivated in staging, and I’ll investigate further. Thanks! 🙂

-Casey-

[jebs38]

All plugins deactivated on the test site.

[jebs38]

Just so you know without my Intelliwidget plugin activated, my entire site structure is devastated and all my important hub pages are missing key components.

[Casey]

John,
Deactivating the other plugins resolved all of the javascript errors. I am noticing the styling errors that you mentioned, but was able to resolve them by doing a few things:

1) I removed the ‘width:250px’ rule for ‘.tribe-events-calendar th’ that you set in your style overrides
2) I added the following style ‘#tribe-events-content table.tribe-events-calendar’:


#tribe-events-content table.tribe-events-calendar {
width:100%;
}


After doing this, I was able to successfully view the calendar in desktop mode (screenshot) and responsive mode (screenshot).

So, give those steps a try and you should be able to resolve the problem. Thanks! 🙂

-Casey-

[jebs38]

Casey, That did it! Now I have to see if I can get the plugins that I need turned back on without wrecking the calendar display. Let’s keep this open until we see what happens.

Thank you so much for your help. You have been great.

[jebs38]

Casey,

The fix is really good and I am very appreciative. I did some checking and and I cannot restore Jetpack without causing major styling problems. That is really problematic because I need it for the carousel and mosaic gallery functions and for the stats.

[jebs38]

Found standalone versions of all of those plugins: tiled galleries, carousel and stats. One step closer.

[Casey]

John,
Just let me know if you’re all set here, or if you have further questions. Thanks! 🙂

-Casey-

[jebs38]

Casey,

I was able to rebuild my child theme from scratch by taking my essential custom style rules and transferring those over and then adding in the latest edition of the base theme. The mobile version of the site and the navigation bar that was driving me crazy are now working fine.

Thanks for your help and patience with me.
John

[Casey]

Excellent! Thanks for confirming that this got you sorted. Since it looks like you’re all set, I’m going to mark this thread “Answered” and close it out.

By the way, if you have a minute or two, we would love it if you’d write a few words for us here: http://m.tri.be/jw

Thanks in advance. 🙂

Cheers,
Casey

[Author]

Posts