User changes breakpoint

subscribe("mediaquery", callback)

Use this method to start listening for specific events in your App. In this case, we’re listening for when a user selects a different media query, also known as a breakpoint, in the Designer.

Webflow’s built-in responsive breakpoints allow users to customize site designs for different screen sizes. Knowing the current breakpoint can help your app build responsive content that’s applicable to different screen sizes and contexts.

Syntax

1 webflow.subscribe( event: 'mediaquery',callback: (element: null | AnyElement) => void): Unsubscribe;

Parameters

event : "mediaQuery"

The name of the event to subscribe to.

callback: (breakpoint: BreakpointId) => void

This is the function that will be called each time the event occurs. It takes a breakpoint as a parameter. Use this function to define what should happen when the event is triggered.

Returns

Unsubscribe

This is a special function you receive after subscribing. When you no longer want to listen to the event, call this function to stop receiving notifications.

Example

1/**
2 * Subscribe to the 'mediaquery' event and get the Unsubscribe function.
3 * This event notifies when the breakpoint changes in the Webflow Designer.
4 * @param {BreakpointId} breakpoint - The current breakpoint ID ('xxl', 'xl', 'large', 'main', 'medium', 'small', 'tiny').
5 */
6const unsubscribeMediaQuery = webflow.subscribe("mediaquery", (breakpoint) => {
7  switch (breakpoint) {
8    case 'xxl':
9      console.log("The current view is for very large screens or high-resolution monitors.");
10      break;
11    case 'xl':
12      console.log("The current view is suitable for large desktop monitors.");
13      break;
14    case 'large':
15      console.log("The current view fits standard desktop monitors.");
16      break;
17    case 'main':
18      console.log("The current view is suitable for smaller desktops or large tablets.");
19      break;
20    case 'medium':
21      console.log("The current view is suitable for tablets and some large phones.");
22      break;
23    case 'small':
24      console.log("The current view is designed for larger mobile devices.");
25      break;
26    case 'tiny':
27      console.log("The current view is for the smallest mobile devices.");
28      break;
29    default:
30      console.log("Unknown breakpoint:", breakpoint);
31  }
32});
33
34/**
35 * Later, when you want to unsubscribe from the 'mediaquery' event:
36 * @function
37 */
38unsubscribeMediaQuery();