Get all media queries

webflow.getAllMediaQueries()

Retrieves all media queries (breakpoints) configured for the current site. Webflow’s responsive breakpoints let users customize site designs for different screen sizes. Use this method to discover which breakpoints a site supports and their width ranges, so your app can build responsive content that applies across screen sizes.

Sites start with four breakpoints (main, medium, small, and tiny). Users can add up to three more (large, xl, and xxl) in the Designer, for a maximum of seven.

Syntax

1
webflow.getAllMediaQueries(): Promise<MediaQuery[]>

Returns

A Promise that resolves to an array of MediaQuery objects, one for each breakpoint configured on the current site. Each object has the following properties:

The array is ordered by cascade specificity — the same order Webflow applies styles. The base breakpoint (main) comes first, followed by ascending min-width breakpoints (large, xl, xxl), then descending max-width breakpoints (medium, small, tiny). This is not a strict sort by viewport width.

Example

1
const mediaQueries = await webflow.getAllMediaQueries();
2
3
mediaQueries.forEach((mediaQuery) => {
4
  console.log("ID:", mediaQuery.id);
5
  console.log("Name:", mediaQuery.name);
6
  console.log("Min width:", mediaQuery.minWidth);
7
  console.log("Max width:", mediaQuery.maxWidth);
8
  console.log("Is base breakpoint:", mediaQuery.isBase);
9
});