> Fetch clean Markdown by appending `.md` to any page URL under https://signalwire.com/docs or requesting it with the HTTP header `Accept: text/markdown`. The root index at https://signalwire.com/docs/llms.txt lists the available documentation indexes.

# sw-ui-responsive-container

Aspect-ratio-aware sizing wrapper used to host call surfaces
inside `<sw-ui-modal>` so the experience adapts gracefully from
ultra-wide monitors down to phones.

```html
<sw-ui-responsive-container aspect-ratio="16/9">
  <sw-call-media></sw-call-media>
</sw-ui-responsive-container>
```

Applies a tiered set of CSS rules based on viewport size:

* **≥ 1280 px** (large monitors): 80 vw, 16:9 aspect, height capped at
  `(width × 9 / 16) + 300 px` to leave room for controls.
* **600 px – 1279 px** (laptops, small monitors): 90 vw, same 16:9 baseline.
* **≤ 600 px** (mobile portrait): 100 vw minus a 20 px gutter, fluid
  height up to 85 svh — drops the strict aspect ratio so portrait
  content fills the screen.
* **≤ 500 px tall, ≥ 600 px wide** (landscape phones, short windows):
  90 vw, 90 vh max, aspect ratio relaxed.

*Class: `SwUiResponsiveContainer` · Module: `packages/web-components/src/components/UI/layout/sw-ui-responsive-container.ts`*

## class: `SwUiResponsiveContainer`, `sw-ui-responsive-container`

### Slots

| Name | Description                                                    |
| ---- | -------------------------------------------------------------- |
|      | Default slot for the content the container should size around. |

---