Sizing and layout

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.

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

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

<!-- 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: the full <caputchin-game> attribute set.
• Widget methods and events: driving the widget and reacting to it.