![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem) ![Jecelyn Yeen](https://web.dev/images/authors/jecelynyeen.jpg) Jecelyn Yeen [X](https://twitter.com/jecfish) [GitHub](https://github.com/jecfish) [Bluesky](https://bsky.app/profile/jec.fish) [Homepage](https://jec.fish/)

<br />

This guide shows you how to inspect and debug CSS container queries in the **Elements** panel in Chrome DevTools.

[Video](https://www.youtube.com/watch?v=X4TYXlvbb2E)

[CSS container queries](https://web.dev/new-responsive/#responsive-to-the-container) allow you to manipulate the element's styles based on its parent container properties. This capability shifts the concept of [responsive web design](https://web.dev/learn/design/intro/) from page-based to [container-based](https://web.dev/articles/new-responsive).

The screenshots in this guide are taken from [this demo page](https://jec.fish/demo/css-cq-coffee).

## Discover containers and their descendants

Every element defined as a query container has a `container` badge next to it in the **Elements** panel. The badge toggles a dotted-line overlay of the container and its descendants.

To toggle the overlay:

1. [Open DevTools](https://developer.chrome.com/docs/devtools/open.md.txt).
2. In the **Elements** panel, click the `container` badge next to the element defined as a container.

![Container badge.](https://developer.chrome.com/static/docs/devtools/css/container-queries/image/container-badge-ab61f2b798884.png)

In this example, the `container-type: inline-size` property defines the container element. The descendants can query its inline dimension (horizontal axis) and change their styles based on the width of the container.

## Inspect container queries

The **Elements** panel shows `@container` query declarations when they are applied to a descendant element, that is, when the container fulfills the query's condition.

To understand when you can inspect `@container` declarations on [this demo page](https://jec.fish/demo/css-cq-coffee), examine the following code sample:

```css
@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }
```

In this example, if the container's width exceeds the following number of pixels, the corresponding styles apply:

- More than `400px`: the paragraph (`p`) element appears on the page as a block---starts on a new line and takes up the whole width.
- More than `600px`: descendants adopt a horizontal grid layout with the title (`h1`) on the top, and image (`img`) on the left.

To inspect the first `@container` declaration:

1. In the **Elements** panel, set the container's width to `500px`. The `p` element appears.
2. Select the `p` element. In the **Styles** pane, you can see the `@container` declaration along with a link to the parent container `article.card`.

   ![@container declaration.](https://developer.chrome.com/static/docs/devtools/css/container-queries/image/container-declaration-133c293f38e0c.png)
3. Set the width to more than `600px`, then select any of the affected elements. Observe `@container` declarations that implement a horizontal layout.

   ![More @container declarations.](https://developer.chrome.com/static/docs/devtools/css/container-queries/image/more-container-declarati-b8ee9f3784113.png)

## Find container elements

To find and select a container element that caused the query to take effect, hover over and click the element name above the `@container` declaration.

![Hovering over the element name.](https://developer.chrome.com/static/docs/devtools/css/container-queries/image/hovering-the-element-nam-740466c42dcc7.png)

When hovered over, the name turns into a link to the element in the **Elements** panel and the **Styles** pane displays the queried property and its current value.

## Modify container queries

To debug a query, you can modify it as any other CSS declaration in the **Styles** pane as described in [View and change CSS](https://developer.chrome.com/docs/devtools/css.md.txt).

In this example, the container's width is `500px`. The paragraph (`p`) element appears on the page.

1. Select the `p` element. In the **Styles** pane. You can see the `@container (inline-size > 400px)` declaration.
2. Change the `inline-size` from `400px` to `520px`.
3. The paragraph (`p`) element disappears from the page because it did not fulfill the query criteria.