Hi all, long time, hope everybody is doing well in these weird times.
I got a problem for a some time and can't figure out a way to fix it.
I'm embedding Hype content into a forum. It works well but when sizing the browser window down, or viewing it on a phone/tablet, there appears "white" /blank space below the Hype content.
I'm using this code for the forum to display Hype:
<div id="myhypedoc_hype_container" style="margin:auto;position:relative;width:100%;height:0; padding-bottom: 25%; overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="https://some-site/forum//myhypedoc.hyperesources/myhypedoc_hype_generated_script.js?6582"></script></div>
Because it's a forum the whole thing is residing in another div:
<iframe frameborder="0" height="250px" src="https://somesite/test_forum/index.php?/hype-stuff.html/" style="display:block" width="100%" scrolling="no"></iframe>
</div>
When I use max-height, or other options the white/blank space disappears but also he bottom-half of my Hype content.
Anyone an idea how to fix this?