Skip to main content

Iframe dimensions

Objective

Size the PuzzleMe™ iframe so puzzles are comfortable to play on desktop, tablet, and mobile.

Learn about page layout that is ideal for embedding puzzles in this guide. The iframe size should meet the width and height requirements so that the puzzle is comfortably playable in the constraints posed by the device and the layout, such as sticky header, footers and the side rails.

Desktops and tabletsMobile phones
Minimum width700px (900px for grids larger than 15)100vw
Maximum width100vw100vw
Minimum height700px100vh minus sticky header/footer
Maximum height100vh minus sticky header/footerSame as minimum
WordroW height630px (fixed)630px (fixed)
Cap to the viewport

Do not let the iframe exceed the available viewport. Prefer max-width: 100vw and max-height: 100vh (minus sticky elements) so the puzzle does not scroll under the fold.

Desktops and tablets​

  1. Set width to at least 700px. For crossword grids larger than 15, use 900px.
  2. Set height to at least 700px.
  3. Keep width and height within the viewport (max-width: 100vw, max-height: 100vh).
  4. For WordroW, use a fixed height of 630px for a snug fit.
Tablet layouts comparing iframe sizing with and without a sticky header
Iframe sizing with and without a sticky header on a tablet
Landscape tablets

Some iPads and tablets in landscape have less than 700px of available height. Set a max-height so the iframe does not extend past the screen.

Mobile devices​

  1. Give the iframe full screen width (100vw) and as much available height as possible.
  2. Avoid horizontal padding or margins on the iframe or its parent containers.
  3. Express height with the viewport—for example 100vh, or calc(100vh - 80px) if you have an 80px sticky header.
  4. For WordroW, use a fixed height of 630px.
Full-viewport on desktop too

You can use viewport-based sizing on desktop as well (for example height: 100vh). Subtract the height of any sticky menus, headers, and footers.

Page layout​

Outer containers around the iframe should be at least as wide and tall as the recommended iframe size. If a CMS or page builder (for example WordPress) constrains the content column, use a fuller-width layout for puzzle pages.

Sticky headers and footers​

Sticky headers and footers often cover part of the puzzle—especially on small screens. Disable them on puzzle pages if you can.

JS embed: account for sticky height

With JS embed, set data-mobileMargin on the pm-embed-div to the combined height of sticky headers, footers, and menus. Example: a 15px header and 10px footer → data-mobileMargin="25px".

Sidebars (featured posts, ads, comments) steal width from larger puzzles. Prefer a full-width puzzle layout, or hide the sidebar when the puzzle loads. You can react to load messages from the iframe—see Iframe communication.

Dynamic height​

If one page hosts puzzles of different sizes, the ideal iframe height changes per puzzle. PuzzleMe sends the recommended height to the parent via postMessage when a puzzle or picker loads. Listen for those messages and update the iframe height—details in Iframe communication.

Table of contents