---
type: reference
title: Sizing and layout
summary: How the width, height, overlay-width, and overlay-height attributes size the caputchin-game element across the inline, modal, and fullscreen layouts.
---

A `<caputchin-game>` can render in three layouts (set with the `layout` attribute): `inline`, `modal`, and `fullscreen`. How you size it depends on the layout, because the modal and fullscreen layouts show **two separate boxes**:

- The **in-page element**: the thing that sits in your page flow. In `inline` that is the whole game panel; in `modal` / `fullscreen` it is the small checkbox the visitor clicks to open the game.
- The **game box**: the dialog that opens on top in `modal` / `fullscreen`, with the game inside it. (In `inline` there is no separate dialog: the panel is the game.)

Four attributes size these two boxes. Every value is one of `auto` (the default), `full` (span the available space), or a positive pixel number like `480`.

| Attribute | Sizes | Applies in |
|---|---|---|
| `width` / `height` | The in-page element | All layouts |
| `overlay-width` / `overlay-height` | The game box (dialog + game) | `modal`, `fullscreen` |

## Inline

Inline has one box, so `width` / `height` size the whole panel. `overlay-width` / `overlay-height` do nothing here and are ignored (the widget logs a warning if you set them).

```html
<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>
```

## Modal and fullscreen

Here the two boxes are independent. `width` / `height` size the **entry checkbox** on your page; `overlay-width` / `overlay-height` size the **dialog and game** that open when the visitor clicks it.

```html
<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>
```

`overlay-width="full"` makes the game fill the dialog along that axis; a pixel value pins the game to that size (a modal shrink-wraps around it). In `fullscreen` the dialog already covers the viewport, so `overlay-*` controls whether the game stretches to fill it or sits centered at its own size.

## When you leave the game box unset

If you do not set `overlay-width` / `overlay-height`, the game box uses the size the **game author** chose for the game (its preferred footprint, declared in the game's `caputchin.json`). So most of the time you only need `width` / `height` for your page layout, and the game sizes itself sensibly. Set `overlay-*` only when you want to override that.

## Pixel values

A plain number is CSS pixels: `width="500"` and `width="500px"` are equivalent. Zero, negative, and non-numeric values are rejected (the attribute falls back to its default and the widget logs a warning).

## See also

- [Game widget element](/docs/getting-started/add-a-game): the full `<caputchin-game>` attribute set.
- [Widget methods and events](/docs/references/widget-methods-and-events): driving the widget and reacting to it.