Shrink to Fit problem

[dsantamonica (David Watkinson)]

When resizing a Chrome browser window to a smaller size, an unwanted increase in separation appears on a Worpress page between stacked Hype OMAs set to "Shrink to Fit"
Example: Test Hype Test Hype Test Hype Test Hype Test Hype - FineDay.com

[Daniel]

Can you see if this extension by @MaxZieb heps solve this issue?

Hype Auto Height

[AutoHeight_2] Here is an extension based on @h_classen great work/code on proportional scaling and the recurring need for proportional scaling in Hype. I used a Unicode character () and turned the logic on its head. Meaning for scenes/layouts you want it to work you add the character. The setup and condition can be easily removed/tweak or enabled for all scenes if you don't like that logic. Another thing I did is to move the code into the Hype document itself, so it should wo…

[MaxZieb (Loves Hype)]

Here is another approach that doesn't require any JavaScript. You can also use modern CSS (add this to your custom CSS in your WordPress theme, rename to your liking):

.aspectWidgetSomename {
    aspect-ratio: 1120 / 395 !important;
}

Add the class aspectWidgetSomename (rename to your liking) to your widget in Hype uploads. Also, ensure that the width and height are set to 100%.

[dsantamonica (David Watkinson)]

Hi Daniel, Thanks for responding. Unfortunately what you suggested is "over my head" so I'll hope for an easier solution.

[dsantamonica (David Watkinson)]

Hi MaxZieb, I tried the adding the class, but it didn't work. The unwanted increase in separation between a hype animation and anything below it on the page when resizing is a problem since I'm trying to use Hype for the menu system on my website fineday.com

[MaxZieb (Loves Hype)]

Make sure to set the height of your Hype file to 100% scale as well (in Tumult Hype in the Scene panel) before uploading as it still seems to be set to 435px. Also, where did you add your version of the class... needs to go into your CSS of the customizer or your builder (of childtheme).

You could also try

#menuquantumv3_hype_container {
    aspect-ratio: 1120 / 395 !important;
}

[dsantamonica (David Watkinson)]

If I set the width and height to scale 100% then the animation never shows up on the page. It only appears when I just set width to 100%. I put the class in the Additional CSS while customizing the theme Inspiro.

[MaxZieb (Loves Hype)]

I added the Plugin Fluent Snippets to install with your theme because I saw it's a Full Site Editing theme. I didn't find a customizer area to put my CSS, so I used the snippet manager.

1. Install the snippet manager (Don't forget to name this snippet, My Styles etc.)
2. Include a new CSS snippet (I also added a width of 100% to my class)
3. Update the snippet
4. Activate the snippet

Now all that is left is to assign the class to your uploaded Hype animation.

[MaxZieb (Loves Hype)]

The solution above should work. Below is just some adjacent thoughts:

---

PS: If I think about it, one could probably even use this more modern CSS approach with a regular Hype function that is called on Hype Scene Load in each layout. We really need built in Hype Document load, that would be great to build in one so we don't have any external Head HTML dependencies or external classes.

function setAspectRatioFromCurrentLayout(hypeDocument, element, event) {
    const currentSceneName = hypeDocument.currentSceneName();
    const currentLayoutName = hypeDocument.currentLayoutName();
    const layouts = hypeDocument.layoutsForSceneNamed(currentSceneName);
    const currentLayout = layouts.find(layout => layout.name === currentLayoutName);

    if (currentLayout) {
        const hypeDocumentElm = document.getElementById(hypeDocument.documentId());
        hypeDocumentElm.style.aspectRatio = `${currentLayout.width} / ${currentLayout.height}`;
    }
}

Haven't fully tested it yet, but the idea is to set the aspect ratio on the Hype document root by calling this on every layout load. One could use Hype events, but for simplicity this limits itself to Hype functions to not introduce external code.

[dsantamonica (David Watkinson)]

Now I'm really confused because I just realized that I have a hype animation behaving the way I want on the same page as the hype menu that is making an unwanted separation between itself and anything below it on the page.

I'm confused because the problem hype has all the same settings as the well behaved one.

You can see the problem hype menu above the well mannered hype banner (that has a choice of languages) here: 1-songbird-series - FineDay.com

[jonathan (Jonathan Deutsch)]

I'm checking it out and it looks like the https://fineday.com/songbird-series/ and https://fineday.com/ URLs are basically behaving the same right now. Did you figure it out?

[dsantamonica (David Watkinson)]

I kinda figured it out. I realized that having a wide animation and scaling with width 100% made more of a spacing when resizing the window than having a less wide taller animation. So I went to the bother of redoing the menu on all pages based on that theory. May not be the best solution, but I need to move on due to the upcoming election and my proposal to deal with the political division. Thanks very much for your interest!

[MaxZieb (Loves Hype)]

Sorry to hear that the aspect ratio didn't work for you? I was busy for the last days. Happy Halloween.

[dsantamonica (David Watkinson)]

No worries. Thanks for your help! I'm sure I'll be needing more in the future I'm focusing on the current project, but when that is completed, my website has another big project waiting for attention that will need a lot of Hype help!