Extra space at the bottom of a parallax type webpage

[Babs]

I have a project that is a parallax scrolling webpage. I created it by setting the scene size to be as long as the full parallax content. The user can then scroll up or down and interact with various items on the page. I placed all my elements into a group and gave it a flexible layout pinned on top and both sides, and a scale behavior of “shrink to fit”, with responsive to 100% width. The project works well and scales responsively, but at small window sizes it leaves a huge white space at the bottom of the window that is continually scrollable. How can I avoid that? Attached is a mocked up example of what is happening when you view the project at smaller browser window sizes.
Any help would be really appreciated!!

whitespace issue.hype.zip (12.6 KB)

[JimScott]

Hi Babs!

Have You tried the “Expand to Fill” option? There should be no blank space at the bottom.

[Babs]

Thanks for your suggestion @JimScott. I tried Expand to Fill but while the white space goes away, the whole thing stops being responsive to width. See attached a better example to show that this is no longer responsive.

whitespace issue Expand.hype.zip (22.1 KB)

[JimScott]

Hi Babs!

Perhaps the info in these two threads might be of help:

Annoying space below hype when scaled 100%

The problem is that the bounds of your Hype document are looking for some constraint, but there isn’t one unless you make the height of your window smaller. Here’s a great approach to resolving this issue, which requires a small snippet of code placed where your document is embedded: Creating a Flexible Tumult Hype Document within a DIV with no set 'height' This example document will ensure that the height of the Hype div will respond to the width of your window. It doesn’t require a constrain…

---

and (see jonathan's response to @Angus_Young's 2nd question)

3 questions about nearly completed site

You can disable preloading in the Resource Library by selecting the image resources and unchecking the Preload option. There's other tips about speeding up your site on @daniel's Decreasing load times and optimizing performance: Preparing a Large project in Hype post. From what I can tell, you are just using the Flexible Layout system. With the multiple layouts of the Responsive Layout system, you could change the layout height. We don't recommend a lot layouts, so there's probably some d…

[Babs]

Hi @JimScott,
Thank you so much - the first post helped me out!!
Babs