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

Implementation​

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.

If sticky headers or footers are absolutely needed, you should give the iframe an extra parameter like &heightReduction=60. This parameter tells the PuzzleMe layout engine that the entire screen space is not available to it, and it tries to squeeze all the elements of the puzzle into 60px less than the screen height. If used, the heightReduction parameter should be set to the minimum possible value for the best user experience.

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.