💡 Be sure you have read our Customizing CSS documentation page before proceeding to this article.

When it comes to customizing mobile styles, there are several key areas to be aware of regarding the responsiveness of the events templates, especially if you plan to customize how this component works.

We’re introducing a new way to handle responsiveness. We’re using container-based queries. This means that the breakpoints react to the size of the containers in which the content is being displayed.

This way we can enable making design changes if a view is being displayed in a widget, in a certain place of a website, where its width is not big enough to display the design correctly.

The way it works is pretty similar to using media queries. The only difference is that we’re using CSS classes to define these. The good news is it’s really simple to add new and customize.

Default breakpoints

  • 500 – extra small breakpoint
  • 768 – medium breakpoint
  • 960 – large breakpoint

Meaning that you could do the following if you want to add some special style for a given breakpoint, the medium one in this example:

.tribe-common--breakpoint-medium.tribe-events .myclass {
    display: none;
}

Modifying breakpoints

If you would like to modify the breakpoints, you can use the below snippet as an example. You don’t need to include all breakpoints, just the ones you would like to change. Note, this will change the breakpoints on all calendar pages:

add_filter( 'tribe_events_views_v2_view_breakpoints', 'customize_tribe_events_breakpoints', 10, 2 );

function customize_tribe_events_breakpoints( $breakpoints, $view ) {
    // Extra small breakpoint (for mobile)
    $breakpoints['xsmall'] = 500;

    // Medium breakpoint (for tablet)
    $breakpoints['medium'] = 768;

    // Large breakpoint (for desktop)
    $breakpoints['full']   = 960;

    return $breakpoints;
}

When customizing mobile styles, if you would like to change the breakpoints on only a certain calendar view, then you can use the tribe_events_views_v2_view_{$this->slug}_breakpoints filter where {$this->slug} is the slug of the view.

So, to change the breakpoints only for the List view you would need to modify the first line of the above snippet like this:

add_filter( 'tribe_events_views_v2_view_list_breakpoints', 'customize_tribe_events_breakpoints', 10, 2 );

Adding new breakpoints

For example: Let’s say you want to customize the responsive breakpoints to have a new one, extra-large for 1024px. You can use the tribe_events_views_v2_view_breakpoints filter like this:

<?php
add_filter( 'tribe_events_views_v2_view_breakpoints', 'customize_tribe_events_breakpoints', 10, 2 );

function customize_tribe_events_breakpoints( $breakpoints, $view ) {
    $breakpoints['extra_large'] = 1024;

    return $breakpoints;
}

And then you can access that like this:

.tribe-common--breakpoint-extra_large.tribe-events .myclass {
    display: none;
}