> ## Documentation Index
> Fetch the complete documentation index at: https://docs.symmetry.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Make a widget responsive

> Fit a CBS widget into a fixed-width or fluid container.

CBS widgets are **responsive**: a widget stretches to fill the width of its parent element. You control the size by controlling the container.

## Fluid (fill available width)

Placed directly in the page or a full-width element, the widget expands to the viewport width:

```html theme={null}
<body>
  <script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"></script>
</body>
```

## Fixed width

Wrap the widget in a container with a set width and it fits that width:

```html theme={null}
<div style="width:300px">
  <script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey"></script>
</div>
```

## Tips

* Set the width on the **parent element**, not the script tag. The widget reads its width from the container.
* For side-by-side calculators, see [Multi-calculator](/cbs/widgets/multi-calc).

If a widget isn't sizing the way you expect, see [Widget won't resize in my layout](/cbs/widgets/wont-resize).
