Setting a minimum height for an embed using the Hype Animations Plugin

Exporting & Previewing
1

Hi Daniel

I posted this elsewhere in the forum but it was suggested it might be an idea to re-post it here, so here goes. For some relevancy, I also have the same issue when using the plugin…

–

So far so good. I have everything exported and sitting happily in the Wordpress site. It’s working great, scaling perfectly, could not be happier thus far. There is one thing though that I just can not work out…

When setting the hype element, I need to assign a set div height, if I don’t, the container collapses. The width seems not so much an issue but unless the div height is given a ‘min-height’ setting, the container collapses to a teeny weeny thing.

Where this becomes an issue is in the responsive break points. While the hype document scales perfectly, the set height on the div obviously does not, so I end up with a set div height across all break points. This becomes an issue where there is content beneath the hype element and to resolve it, I have had to assign custom negative margin-top values for the various breaks; it’s really less than ideal.

Is there a way around this that anyone’s worked out? I’ve tried everything to no avail…

Cheers in advance!

This is the page where it’s an issue

2

Here’s how to do that:

You can set a CSS class on a specific Hype element by filling in a CSS class on the input form:

Screen Shot 2017-12-12 at 2.46.21 PM.png990×141 19.7 KB

Next, go to your theme CSS, and insert:

.minheight400 { min-height:400px; }

This will apply the class to your Hype animation, and your Hype element will be a child element of that.

2 Likes
3

Hey Daniel.

I gave that a go, both through the plugin and via direct code but still no dice. Through the plugin, the DIV it did not work at all, the Hype doc did not push out the container to fill even the min height. I then tried an iframe (via the plugin) and had more success, in that it respected the min height setting.

The issue is though (which goes back to original question), with the wrapper's min-height set to 550, which is height of the doc, the DIV wrapper does not scale with document across breakpoints. So while the Hype doc. scales beautifully, the wrapping DIV, set to 550, stays at 550 - I still have to instigate the css breakpoint adjustments to offset DIV wrapper's behaviour.

Hmmm.

Here's a link that demonstrates the issue https://playforest.com/mag-100/ch-00-00/prelude/ - collapse your browser window or look at it on a phone and you'll see the issue nicely.

4

When you have a Hype document that scales proportionally in the height and width dimension, you need to set up a dynamically adjusting enclosing Div that corresponds to the ratio you desire. This excellent script by @h_classen is what you want to use. What that does is adjust the enclosing DIV which contains your responsive Hype document and keeps the ratios correct as your width is reduced. You'll still need the minimum height Class set, but this should help you avoid the bottom white space. The min-height will be overridden by the CSS set on the div since inline CSS overrides any class definitions you have referenced elsewhere.

You could also set the scene background to be the same background as your blog's background if this is not what you'd like to do.

1 Like
5

Hi Daniel,

That’s pure gold! Did the trick perfectly and have checked it on various devices and it’s spot on. For what it’s worth, I stripped out the min-height and only have the ‘default_hype_container’ id and it’s behaving perfectly.

Many thanks for pointing it out and moving the topic - it’ll be easier to find now :slight_smile:

BTW, any chance for this to go into the plugin so it does not have to be added after the fact?

Cheers!

1 Like