UtilitiesSite Information & Settings

Get the current breakpoint

webflow.getMediaQuery()

Retrieves the current breakpoint setting in the Designer. Webflow’s built-in responsive breakpoints - also known as media queries - 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.

This method returns only the breakpoint the user is currently viewing. To get every breakpoint configured for the site — along with each one’s name, width range, and which is the base breakpoint — use webflow.getAllMediaQueries().

Syntax

1webflow.getMediaQuery(): Promise<BreakpointId>

Returns

Promise<BreakpointID >:"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny" - Identifier for the breakpoint size, also known as media query, in the designer.

A Promise that resolves to the value of the Breakpoint ID.

Example

1const breakpointId = await webflow.getMediaQuery();
2
3  switch (breakpointId) {
4    case 'xxl':
5      console.log("The current view is for very large screens or high-resolution monitors.");
6      break;
7    case 'xl':
8      console.log("The current view is suitable for large desktop monitors.");
9      break;
10    case 'large':
11      console.log("The current view fits standard desktop monitors.");
12      break;
13    case 'main':
14      console.log("The current view is suitable for smaller desktops or large tablets.");
15      break;
16    case 'medium':
17      console.log("The current view is suitable for tablets and some large phones.");
18      break;
19    case 'small':
20      console.log("The current view is designed for larger mobile devices.");
21      break;
22    case 'tiny':
23      console.log("The current view is for the smallest mobile devices.");
24      break;
25  }
26}