Problem with breakpoints?

Hi @steppppo ,

Thank you for reaching out, and I’m sorry to learn of the difficulties.

A lot of these issues can be attributed to caching so I recommend we start with that. If you are using some caching mechanisms (i.e. Page Cache, Object Cache, etc.) try purging the cache and see if that helps.

Otherwise, the issue could be due to a conflict with third party plugins and/or themes. It would be good to test for conflicts. Could you follow the following steps?

1. Deactivate all other plugins except for The Events Calendar Plugins.
2. Switching to the Default theme.

Please read the Testing for Conflicts Article before doing anything. 

To be safe, we’d recommend conducting tests and updates on a Staging Server. Also, please keep a working backup of your website.

Hi Tristan,

Thanks for your answer. I’m still trying to figure out where the conflict is located. It appears to be a problem with the custom-built theme. I’m hoping you can point me in the right direction to help me narrow it down.

For some reason, the following classes disappear when I reload the /list/ page and it causes the page to display the mobile view even on desktop:

tribe-common--breakpoint-xsmall tribe-common--breakpoint-medium tribe-common--breakpoint-full

Can you help me narrow down the function in the Events Cal plugin where the javascript loads these classes? I’m assuming it’s javascript but I’m not certain. Knowing that function could help me figure out the trail going back to the theme and hopefully to the point of conflict. I appreciate everything you all are doing with this plugin. It’s worked great on other sites.

Hi there,

Thanks for your kind words! I would be happy to help you with this.

You should be able to add this Javascript to your custom theme, which will redefine the container of the page for the breakpoints:

var container = document.querySelectorAll( '[data-view-breakpoint-pointer]' );
if (container.length > 0) {
window.tribe.events.views.breakpoints.setup( container ); 
}

Additionally, if you use Chrome Dev tools to inspect your page, you can see where this script is being executed by going to the Sources tab, selecting the ‘index’ page from the left hand menu, and then searching for ‘tribe-events-breakpoints’

Let me know if that helps or if you have any other questions.

Best,
Sam

Thanks @sdokus for that. I have added that script to the page and I can see where the ‘tribe-events-breakpoints’ is firing. I still need to make the connection between that and the classes not loading.

Does the div that contains [data-view-breakpoint-pointer] mean that’s the container that Events Cal is looking for when it decides to render as mobile or desktop?

Hi @steppppo

Does the div that contains [data-view-breakpoint-pointer] mean that’s the container that Events Cal is looking for when it decides to render as mobile or desktop?

Yes, that is correct.

Let me know if you have further questions or concerns.

Great! Thanks @d0153!

So, it looks for that container and then what happens next? Does the number after the data-view-breakpoint-pointer do anything? Is there a specific function that is fired by the Events Calendar based on something in the container?

Hi @steppppo

From what I understand from the snippet code provided here, it will check the current container’s width. If it falls under a mobile screen, then it will add a class for mobile, otherwise add a class for desktop.

I hope this helps, and please let me know if you have further questions or concerns.

If it falls under a mobile screen, then it will add a class for mobile, otherwise add a class for desktop.

What’s the name of the function that adds the class?

• This reply was modified 1 year, 6 months ago by Steppppo.

Hi @steppppo

I think this is the function you’re looking for. [See this reply]

window.tribe.events.views.breakpoints.setup( container ); 

@d0153 Darian – I believe that bit of javascript is for finding the container that Events Cal will use to calculate the width so that it knows what classes to add (or not).

I need to know the function that is adding these classes to the page:

tribe-common--breakpoint-xsmall tribe-common--breakpoint-medium tribe-common--breakpoint-full

Hi @steppppo

I just tested it on my side and by running the script, it will add necessary class to the container.

See- https://share.getcloudapp.com/jku62dY2

I hope this helps, and please let me know if you have further questions or concerns.

But if you try to refresh the page, the classes disappear. That’s the behavior I’m trying to eliminate. I need to know what function is adding the classes. It’s not that snippet.

Hi @steppppo

Thanks for your message.

I tried refreshing the page, but the classes are showing on my end. Only by changing the views to Month or List views, then the classes disappear.

Let me check with the team with this, and I’ll get back to you as soon as I know more.

Thanks @d0153 Darian. I appreciate it.

Hi @steppppo

I have contacted the team for an update and will promptly inform you as soon as I receive a response from them.