Customizing Mobile Styles

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

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, 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:

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

Adding new breakpoints or modifying existing:

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;
}

    Details

    Report an issue