> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Get all media queries

## `webflow.getAllMediaQueries()`

Retrieves all [media queries](https://help.webflow.com/hc/en-us/articles/33961300305811) (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.

> **Note**
>
> This method returns every breakpoint configured for the site, along with each one's dimensions. To get the single breakpoint the user is currently viewing in the Designer, use [`webflow.getMediaQuery()`](/designer/reference/get-breakpoint). You can match its returned `BreakpointId` against the `id` field here to look up the active breakpoint's full details.

### Syntax

```typescript
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:

| Property   | Type             | Description                                                                                                           |
| ---------- | ---------------- | --------------------------------------------------------------------------------------------------------------------- |
| `id`       | *BreakpointId*   | Identifier for the breakpoint: `"xxl" \| "xl" \| "large" \| "main" \| "medium" \| "small" \| "tiny"`.                 |
| `name`     | *string*         | User-facing label for the breakpoint, for example `"Desktop"`, `"Tablet"`, or `"Mobile"`.                             |
| `minWidth` | *number \| null* | Minimum width in pixels the breakpoint applies to, or `null` when unbounded below.                                    |
| `maxWidth` | *number \| null* | Maximum width in pixels the breakpoint applies to, or `null` when unbounded above.                                    |
| `isBase`   | *boolean*        | Whether the breakpoint is the site's base breakpoint, which all other breakpoints inherit from. Today this is `main`. |

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

```typescript
const mediaQueries = await webflow.getAllMediaQueries();

mediaQueries.forEach((mediaQuery) => {
  console.log("ID:", mediaQuery.id);
  console.log("Name:", mediaQuery.name);
  console.log("Min width:", mediaQuery.minWidth);
  console.log("Max width:", mediaQuery.maxWidth);
  console.log("Is base breakpoint:", mediaQuery.isBase);
});
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)