Responsive Templates

🔔 Note: this article only applies to legacy calendar views.

There are several key areas to be aware of regarding the responsiveness of the calendar templates.

The default breakpoint at which the responsiveness kicks in for smaller devices is 768px. This breakpoint can be customized or completely removed using the following filters:

  • tribe_events_mobile_breakpoint: Edits the breakpoint
  • tribe_events_kill_responsive: Removes all breakpoints

Let’s say you want to customize the responsive breakpoint to be 600px. You can use the tribe_events_mobile_breakpoint filter like this:

function customize_tribe_events_breakpoint() {<br>
return 600;<br>
}<br>
add_filter( 'tribe_events_mobile_breakpoint', 'customize_tribe_events_breakpoint' );

Now let’s say you want to remove the responsiveness altogether. You can use the tribe_events_kill_responsive filter like this:

add_filter( 'tribe_events_kill_responsive', '__return_true');

Lastly, we have provided a couple of body classes that you can use to further customize the calendar’s responsive styles with CSS:

  • .tribe-is-responsive: This is added if the breakpoint hasn’t been killed
  • .tribe-mobile: This is added once you reach the responsive breakpoint breakpoint

Details

Report an issue