Make a widget responsive - Symmetry Docs

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:

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

<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.

If a widget isn’t sizing the way you expect, see Widget won’t resize in my layout.

⌘I