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.

On narrow screens

When the game is wider than the space it gets (a phone, a narrow column), the widget keeps it inside that space, so it never pushes your page sideways. How it fits depends on how the game author declared it in the game's caputchin.json:

• A responsive game takes the narrower width and redraws for it, at its usual height.
• A game marked not responsive ("responsive": false under marketplace.support) keeps its shape. The widget shrinks the whole game evenly, so it looks the same, only smaller. In modal and fullscreen it also shrinks to fit the screen height, for a phone held sideways.

This applies when the game sizes its own box. In inline that means you leave width and height unset; in modal / fullscreen it means neither overlay-width nor overlay-height is full. An axis you leave unset also counts as full when the game author set that axis to full in the game's preferred footprint (in caputchin.json). A box that is full on an axis stretches the game to fill it instead.

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.