---
title: Query container
description: >-
  The query container component establishes a container query context for
  responsive design. Use query container to define an element as a containment
  context, enabling child components or styles to adapt based on the container's
  size rather than viewport width.


  Query containers support modern responsive patterns where components respond
  to their container dimensions, creating more flexible and reusable layouts.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/query-container
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/query-container.md
---

# Query container

The query container component establishes a container query context for responsive design. Use query container to define an element as a containment context, enabling child components or styles to adapt based on the container's size rather than viewport width.

Query containers support modern responsive patterns where components respond to their container dimensions, creating more flexible and reusable layouts.

### Support Targets (29)

### Supported targets

* purchase.​checkout.​actions.​render-before
* purchase.​checkout.​block.​render
* purchase.​checkout.​cart-line-item.​render-after
* purchase.​checkout.​cart-line-list.​render-after
* purchase.​checkout.​contact.​render-after
* purchase.​checkout.​delivery-address.​render-after
* purchase.​checkout.​delivery-address.​render-before
* purchase.​checkout.​footer.​render-after
* purchase.​checkout.​header.​render-after
* purchase.​checkout.​payment-method-list.​render-after
* purchase.​checkout.​payment-method-list.​render-before
* purchase.​checkout.​pickup-location-list.​render-after
* purchase.​checkout.​pickup-location-list.​render-before
* purchase.​checkout.​pickup-location-option-item.​render-after
* purchase.​checkout.​pickup-point-list.​render-after
* purchase.​checkout.​pickup-point-list.​render-before
* purchase.​checkout.​reductions.​render-after
* purchase.​checkout.​reductions.​render-before
* purchase.​checkout.​shipping-option-item.​details.​render
* purchase.​checkout.​shipping-option-item.​render-after
* purchase.​checkout.​shipping-option-list.​render-after
* purchase.​checkout.​shipping-option-list.​render-before
* purchase.​thank-you.​announcement.​render
* purchase.​thank-you.​block.​render
* purchase.​thank-you.​cart-line-item.​render-after
* purchase.​thank-you.​cart-line-list.​render-after
* purchase.​thank-you.​customer-information.​render-after
* purchase.​thank-you.​footer.​render-after
* purchase.​thank-you.​header.​render-after

## Properties

* **containerName**

  **string**

  **Default: ''**

  A custom name for the container, used in [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name) to target this container specifically. The value is added alongside the default name `s-default`.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/query-container-default-CbeSBMpH.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-query-container>
    <s-box
      padding="@container (inline-size > 500px) large-500, none"
      background="subdued"
    >
      Padding is applied when the inline-size '>' 500px
    </s-box>
  </s-query-container>
  ```

## Related

[Utility - Responsive values](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/using-polaris-components#responsive-values)