Calendar displays mobile version only.

[Henrico County]

After installing and Events Calendar Pro and Events Calendar, I created several events for testing. the calendar displays the mobile version. (instead of the brief description, I get that dot).
I deactivated all pluggins, problem still exist. I’m using Bootstrap framework. No other calendar is installed. Reverted to 2011 calendar works. Any suggestions?

[Josh]

Hello henricocounty,

Thanks for reaching out to us!

Is there a link that we can see the issue live? Also, to start off with, have you tried following the Testing for Conflicts procedures to see if there is a conflict with an existing theme or plugin?

Let me know if anything comes up as a conflict when testing.

Thanks!

[Henrico County]

Thanks for your response here is the link
http://henrico.us/events/

Yes, I went through the Testing Conflicts procedures. 2011-2014 themes work fine, I can’t pinpoint exactly why ours is failing. The browser cache has been reset, I’ve deactivated and/or removed all plugins, nothing seems to work. We are using The Roots.
Thanks

[Josh]

<p>Hello henricocounty,</p><p>Thanks for following up with us!</p><p>It looks like the mobile stylesheet is being enqueued early. You can try to manually decreasing the breakpoint size ( currently set to 768px ) using the “tribe_events_mobile_breakpoint” filter to see if you can force the stylesheet to load at a lower screen size.</p><p>Hopefully this will help to get you pointed in the right direction. Unfortunately, there isn’t a whole lot we’re able to do with supporting theme conflicts but hopefully this will get you to determine where the conflict may be arising. </p><p>Thanks!</p>

[Henrico County]

I read thru the document explaining the break point filter. It wasn’t clear as to where to place the filter. Inside which file?

function customize_tribe_events_breakpoint()
{return 600;}
add_filter( ‘tribe_events_mobile_breakpoint’, ‘customize_tribe_events_breakpoint’ );

[Josh]

Hello henricocounty,

Thanks for following up with us!

You can add the code above to your theme’s functions.php file and that should work to change the breakpoint. Let me know if that works for your site.

Thanks!

[Henrico County]

Thanks for the info this is great. When I use the Kill responsive function it works. I’m having problem trying to find the proper break point. No matter what number I insert its still seem stuck in the responsive view.

[Josh]

Hello henricocounty,

Thanks for following up. I’m glad you were able to find a solution that works for now.

It definitely sounds like it is a javascript issue that is at the root of the problem. Another option you could pursue is dequeueing different parts of the Bootstrap library to see if there is a specific script that is causing the conflict.

I’m sorry I wasn’t able to give you a direct response however I hope this was able to point you in the right direction.

Thanks!

[Henrico County]

Hi,

This isn’t really a solution that works though. Only the ‘kill responsive’ works, no matter what we set a breakpoint to, that code never does anything.

What appears to be happening is that no matter what the breakpoint is, the mobile theme is being included. Since that then doesn’t use its own set of media queries, they are overriding everything. For example, looking at line 651 in tribe-template-factory-class https://github.com/moderntribe/the-events-calendar/blob/056aca6f5887a3b2425a61ba6234e2e25b273683/lib/tribe-template-factory.class.php#L651), as long as that number is not 0, it includes. These includes are happening before our bootsrap includes from our theme.

Example:

<link rel=”stylesheet” href=”/wordpress/plugins/the-events-calendar/resources/tribe-events-full.min.css?ver=3.8.1″>
<link rel=”stylesheet” href=”/wordpress/plugins/the-events-calendar/resources/tribe-events-theme.min.css?ver=3.8.1″>
<link rel=”stylesheet” href=”/wordpress/plugins/the-events-calendar/resources/tribe-events-full-mobile.min.css?ver=3.8.1″>
<link rel=”stylesheet” href=”/wordpress/plugins/the-events-calendar/resources/tribe-events-theme-mobile.min.css?ver=3.8.1″>
<link rel=”stylesheet” href=”/wordpress/css/bootstrap.css”>
<link rel=”stylesheet” href=”/wordpress/css/bootstrap-responsive.css” media=”screen”>
<link rel=”stylesheet” href=”/wordpress/css/app.css”>

We need more assistance on the direction to take. We started off using the Root’s theme, which we had read before has conflicts out of the box with this plugin – but no fixes or notes are shown. We haven’t seen anything like this with any of our other projects or custom code.

[Josh]

Hello henricocounty,

Thanks for following up with us.

I’m sorry for the issues that you’re experiencing with compatibility between our plugin and your theme. Unfortunately there isn’t a whole lot we’re able to do in regards to theme conflicts.

It looks like there is some information in the Roots forums about compatibility and may be a good starting point to diagnosing the issue you’re experience with the theme.

Thanks!

[Henrico County]

This reply is private.

[Henrico County]

I have done more testing. Nothing on the Roots forum at this time reflects anything like we are seeing – we are using a much older version before they moved to this theme nesting stuff.

First of all, by doing an echo in a sample template, the tribe_get_mobile_breakpoint is actually returning the valid value – so it is getting set. Secondly, if I add say @media(max-width:800px) { to the top of the mobile file – it also works responsively as it should.

I got the second idea from https://wordpress.org/support/topic/plugin-the-events-calendar-problem-with-responsive , where a support rep for Modern Tribe notes that if we can narrow it down to Events Calendar, they should be able to help. Something about how you set this value is off, or not picking up at the right time. How can I adjust that? Moving the break up to the top of the functions file doesn’t change anything.

[Henrico County]

Yet another update. I realized if you read from https://github.com/moderntribe/the-events-calendar/blob/056aca6f5887a3b2425a61ba6234e2e25b273683/lib/tribe-template-factory.class.php#L639 till about line 700, its supposed to add some extra stuff when it enqueues, and it doesn’t on our theme – but does on others. For example, at the end of the include, it adds media=’only screen and (max-width: 768px)’, but its not doing that on ours. Could this shed some insight on the issue?

[Henrico County]

That’s exactly it (I think) – the fact that its not adding that media line. It does this in your plugin at https://github.com/moderntribe/the-events-calendar/blob/056aca6f5887a3b2425a61ba6234e2e25b273683/lib/tribe-template-factory.class.php#L688 .

Why would this not get set? If I use the inspector and add that line, things work as they should.

[Henrico County]

I found the issue, and a fix, which is a Roots template issue. As I was researching, after I found out that it cleared out that media query, I found something similar where I had issues with it applying print stylesheets.

If you check out https://github.com/roots/roots/blob/5.2.0/inc/cleanup.php#L607 , it looked something like this. I added an extra check for the style that this puts out, and it now works.

Thank you for your help, and sorry for the confusion. I am guessing that how TEC has so many overrides, this was the only way for you to implement such a feature.

[Author]

Posts