Strange behavior in month view / mobile

[Ben]

I am building a custom theme for a client integrating Events Calendar Pro.

First, some typical debug info for context: I am getting no javascript errors in the console. If I disable all of my custom template files the problem persists. If I also disable all plugins except TEC & ECP the problem persists. If I also switch to the Twenty Fourteen theme the problem goes away which points to some conflict within my theme.

However, the behavior gets more interesting which is why I am posting here in the first place.

If I use the “Full Styles” or “Tribe Events Styles” stylesheet settings then in month view at a mobile size (< 768px) everything works properly. But larger than 768px the month view does not flip to the “desktop” styles. It does not show me event titles. Clicking on a day with the dot showing that there is an event no longer shows me the event details below the calendar or in a popup. Again, no JS errors in the console.

If I switch to “Skeleton Styles” then I lose all mobile styles/functionality but the popups work properly across the board.

I would dig through the stylesheets but going through all 8 that ECP loads is a bit daunting. I’m not sure what the relationship between CSS and JS is when switching styles in the Settings but I am hoping you can point me in the right direction.

Right now this version of the site is only local but I can get a version online if necessary. I would appreciate any help before having to set that up, though.

[Casey]

loudermedia,
Thanks for getting in touch! In order to troubleshoot this, I’ll actually need to see a site running with your theme in place, so I can inspect the HTML and CSS further. Can you share a link with me once you get something up and running? Thanks! 🙂

-Casey-

[Ben]

This reply is private.

[Casey]

loudermedia,
I noticed that the ‘media’ attribute isn’t being added to the *-mobile.min.css stylesheets. This is crucial or your site will essentially be displaying in responsive mode at any resolution.

I’m currently seeing this on your dev site:

<link rel='stylesheet' id='tribe-events-calendar-full-pro-mobile-style-css' href='http://dev.davepittmanlive.com/wp-content/plugins/events-calendar-pro/resources/tribe-events-pro-full-mobile.min.css?ver=3.5.1' type='text/css' />

The correct HTML should be this:

<link rel='stylesheet' id='tribe-events-calendar-full-pro-mobile-style-css' href='http://dev.davepittmanlive.com/wp-content/plugins/events-calendar-pro/resources/tribe-events-pro-full-mobile.min.css?ver=3.5.1' type='text/css' media='(max-width: 768px)' />

You’ll notice that the ‘media’ attribute is missing in the example from your site. I’m guessing that a plugin or your theme has a filter/function that is removing the ‘media’ attribute from your CSS files.

Can you confirm? Thanks! 🙂

-Casey-

[Ben]

That was absolutely the issue. We had a filter getting rid of excess attributes on link tags but apparently that one was not excess… it was essential. Thanks!

[Casey]

Great! 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