Display inconsistency

Responsive Responsive Layouts
1

Here’s a site that I’m working on. As can be seen, there is a lot of Hype content - everything but the menus and the white areas with text:

website in progress

With the exception of the Hype element on the home page, the responsive design works properly. Here’s the Hype element on its own:

Hype element

The only difference is that the scenes in the above element are set to scale at 100%, both horizontally and vertically.

Following is the code (brackets for carets) This is essentially the same code as is used with all the other Hype elements. I’ve tried swapping this code for that in a div of a properly working element, but with the same result. I’m guessing that setting the vertical scale to 100% is the reason and that there is some other setting somewhere to compensate.

{div id=“flexslideshowmobile_hype_container” style=“margin:auto;position:relative;width:100%;height:100%;overflow:hidden;” aria-live=“polite”}
{script type=“text/javascript” charset=“utf-8” src=“FlexSlideShowMobile.hyperesources/flexslideshowmobile_hype_generated_script.js?74387”}{/script}
{/div}

I assume that the fix is a very simple one, but it alludes me. Any ideas? (Thanks!)

2

When you set a scale factor for the height, the document will expand based on what it can detect regarding the height of parent elements. This works great on pages where it is on its own, but in your document, the content flows below without leaving any space for your responsive Hype document.

So the Hype document is fitting 100% of the height available to it, and unfortunately that height is 0 pixels high. I recommend not using flexible layouts for the height dimension for your smaller layouts.

Your larger layout is not set to scale flexibly on the height dimension so it appears correctly -- its height is set to 500px, while your width is set to scale flexibly (its value is 100%). This is a great setting for responsive layouts and you should copy that format to your smaller layout to fix the issue.

4

k