Skip to main content

Iframe dimensions

Objective

Understand the iframe size requirements for an optimal puzzle solving experience

Iframe size:​

Desktops and tablets​

  1. Please provide a width of at least 700px to the iframe. For crosswords with a grid size larger than 15, we would recommend increasing the width to 900px.
  2. Please provide a height of at least 700px to the iframe.

Mobile devices​

  1. Please provide 100% of the screen width and 100% of the available screen height to the iframe.
  2. Please do not keep any horizontal padding or margins for the iframe, or for any container divs.
  3. For height, you could specify the iframe height in terms of the available viewport height. For example, 100vh.
  4. If there is a sticky header or footer, then please subtract their height from the viewport height. For example, if the sticky header is 80px, you could specify the height of the iframe to be calc(100vh -80px).
note

If you would prefer the game area to occupy the full available screen height, you can use viewport based height and width on desktop devices as well. For example, using 100vh as iframe height on desktop. Please ensure you subtract the height of any sticky menus, headers and footers.

:::alert If you would prefer the game area to occupy the full available screen height, you can use viewport based height and width on desktop devices as well. For example, using 100vh as iframe height on desktop. Please ensure you subtract the height of any sticky menus, headers and footers. :::

Page layout​

Usually, the puzzle iframe is nested within another div(s) on your site. In such a case, the outer divs' dimensions should be the same as or larger than the recommended iframe size.

If you are using a CMS like WordPress, or a page builder plugin, the default size of the content area might limit the space available to the iframe. In this case, please consider switching to a different page layout for the puzzle pages.

Sticky headers and footers​

In most cases, sticky headers and footers should be disabled on the host page if possible, as they can occlude parts of the puzzle. While sticky headers and footers are useful for site branding, they cause problems especially on mobile devices with limited screen area and therefore sticky headers and footers are strongly discouraged. The only time a sticky header or footer should be used is when carrying ads is a requirement.

Oftentimes, sidebars contain featured posts, banner ads and comment widgets hosted beside the puzzle iframe. With larger puzzle sizes, it would be advisable to drop the sidebar content and increase the width of the puzzle iframe. You can dynamically change the size of the iframe and drop the sidebar, based on the message received from the iframe when the puzzle loads. For more details, check out the documentation on iFrame communication, and Washington Post's implementation.

Dynamic height​

If you are embedding puzzles of varying sizes and types on the same page, the recommended ideal height for each puzzle might vary. The PuzzleMe iframe sends this ideal height for each puzzle and picker load, to the parent page via window.postMessage API.

In case you want to adjust the height of the iframe to match this recommended height, you can listen to the post messages sent by the iframe. Please refer to the documentation on iframe communication for more details.