Automatically resizing width of Hype document

Hi everyone, I’m trying to add a Hype file to a new Wordpress site I’m making, but I’m having trouble with its dimensions.

The page I’m working on uses the Fusion Builder tab functionality on the Avada theme, and I want to place the Hype file within one of those tabs. The problem is that when I view the page and select the tab that has the Hype file, it shows the smallest layout available (optimized for mobile). For the page to display the proper layout I would need to manually adjust the actual window of the browser.

Is there any way I can have my document dynamically change the size of the document automatically? I’m not sure whether I forgot a setting within Scenes or I would need to add code. Any help would be appreciated!

It may be difficult to provide correct guidance without knowing more about Fusion Builder or your specific document, but there’s probably ways to do what you want.

Hype chooses its responsive layout size based on the dimensions of the parent element for the *_hype_container div. So it may be that this size needs to be changed, or changed at a different time. Unfortunately there’s not a great way to determine when containers sizes change but Hype does listen to when the window size changes. If a container changes after Hype decided to show the layout and this change wasn’t from a window resize, then Hype won’t know anything about it nor attempt to change layouts.

Hype does provide a JavaScript API that allows for solving this problem.

The simplest call to try would be the relayoutIfNecessary() call. From outside the context of Hype, it would look something like:


You may need to find an appropriate time based on the theme/product to call this; and it would have to be after the document has been created.

Hype also provides some APIs for manipulating layouts directly, and forcing specific ones to show. See this documentation:

Specifically, you can add a handler to the "HypeLayoutRequest" event callback and force a scene to be shown. That code could just go into the head html, and would look like:

function myCallback(hypeDocument, element, event) {
    // see event.sceneName and event.layoutName
    return "iPhone";

if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":myCallback});

In this case it is always forcing a layout called “iPhone” to be shown.

So I’m sorry that’s not a direct solution, but I’d imagine it is possible to solve this and hopefully points you in a way that will work with Fusion Builder!

1 Like