Iframe dimensions
Understand the iframe size requirements for an optimal puzzle solving experience
Iframe size:
Desktops and tablets
- 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.
- Please provide a height of at least 700px to the iframe.
- The width and height of the iframe should not exceed the width and height of the viewport. Thus, ideally, keep a max width of 100vw and a max height of 100vh for the iframe.
- (Only for WordroW) : For WordroW puzzles, we recommend using a fixed height of 630px for a snug fit.
In some tablets/ipads in landscape mode, the available viewport height is less than 700px. To prevent the iframe from flowing below the screen, setting max-height is strongly recommended.
Mobile devices
- Please provide 100% of the screen width and 100% of the available screen height to the iframe.
- Please do not keep any horizontal padding or margins for the iframe, or for any container divs.
- For height, you could specify the iframe height in terms of the available viewport height. For example, 100vh.
- 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).
- (Only for WordroW) : For WordroW puzzles, we recommend using a fixed height of 630px for a snug fit.
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.
Reference table
| Recommendation | Desktops and Tablets | Mobile Phones |
|---|---|---|
| Minimum width | 700px for small grids, 900px for large grids | 100vw |
| Maximum width | 100vw | Same as min. width |
| Minimum height | 700px | 100vh - sticky header/footer |
| Maximum height | 100vh - sticky header/footer | Same as min. height |
| Height (only WordroW) | 630px | 630px |
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.
If you are using JS Embed code, you can specify the combined height of all sticky elements (headers, footers, menu etc.) as the value of the data-mobileMargin attribute. For example, if the height of your header is 15px, and footer is 10px, specify data-mobileMargin="25px" in the JS embed code's skeleton HTML.
Sidebars
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.