Extra space at the bottom of a parallax type webpage


#1

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)


#2

Hi Babs!

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


#3

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)


#4

Hi Babs!

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


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


#5

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