Mobile Site - Bottom Gap Issue

Responsive Flexible Layouts
1

Hello,

I have been having an issue for a while now and the gents over at this post (Creating a Flexible Tumult Hype Document within a DIV with no set 'height' - Responsive Layouts - Tumult Forums) gave me lots to look at and try but it still has not resolved my issue.

I have a large gap at the bottom of my web pages when loading on a mobile device. The issue is that the file scales down but seems to have a large gap at the bottom of the pages on mobile devices.

I created a video to show my issue: https://drive.google.com/file/d/14rB9eCjyFT7Y7GOBFDETbqnjBxOXjVe9/view?usp=sharing

Here is the Hype file for investigation:
https://drive.google.com/open?id=1CuGPawuXmV1VwHyLP6VAK6-e_rPtf1Bx

Thank you. Please let me know if you need more info.

Cheers!

2

Hype does not offer any functionality to resize a scene or document regarding its content. so so far you can not achieve this via boardsettings.

any "gap" is the result of a static scene- and documentheight AND the already existing gap that you placed in your document ... there may be a reason for that, but it definitely confuses people trying to understand your issue...

it seems to me that your aim is to have a hype-documentheight corresponding to a hypeelementheight ... is that the case¿

3

I think... I'm having the same problem.

A Hype made document, when scaled down it creates a large empty bock below it.
The Hype doc scales but then there is a weird space being created when the page scales down.

Normal desktop sized:

normal_desktop-size
normal_desktop-size830×398 29 KB

Sized down on for example, a phone:
sizeddown

<div id="2021_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://yoursite.com/2021.hyperesources/2021_hype_generated_script.js?6582"></script>
	</div>

It is as if the div Hype is in refuses to scale it's height down.

So this was how I used flexible layout on the above:
Screen-Shot-2021-05-16-at-10.49

If I change it to this:
Screen-Shot-2021-05-16-at-10.51

the gab/space, is gone but now the contents of my document stretches and squeezes horizontally like it's made of some sort of elastic pie, which is not desired.

Been banging my head at this for a long time now... :neutral_face:

4

@Rick4F are you using any other script to change the height. The OP here is and was using autoHeight but are you only using the native pins? Got a link?

5

a scaled element in html will hold its orginal dimensions ... so regarding a normal hmtl-flow it'll produce a gap ... for sure ... but as far as i can see, this is not the issue of the thread :slight_smile:

but you may consider open a new thread containing examplefile/link ...

1 Like
6

@Rick4F this thread may help too: Exporting and embedding hype in other HTML

Paste it in the head.
note: disable responsive settings in the Hypedocument

1 Like
7

@MaxZieb just to be clear I did remove the code from the other thread you guys were helping me with that I linked in the original post. The code you made DOES resolve my mobile gap but then adds a gap on my Desktop pages. So I just removed it.

8

I still have your file in my downloads. And I got no issue whatsoever (made it red, so you can see it). In the screenshot I also selected the HYPE_document node being scaled to show that the height is actually being set and calculated correctly …

CleanShot 2021-05-16 at 20.50.25@2x
CleanShot 2021-05-16 at 20.50.25@2x1754×1500 496 KB

The "gap" is in your file and scales proportional as expected in Desktop and Mobile.

CleanShot 2021-05-16 at 20.48.42@2x
CleanShot 2021-05-16 at 20.48.42@2x1676×752 118 KB

PS: I saw that you're using Hype Reflect to test … that app is often not the same as viewing it in the mobile browser directly. Click on the Safari Icon in Reflect to transfer the page over to Safari and check if it isn't actually an error in Hype Reflect you are dealing with and also use your browsers responsive mode (Safari and Chrome allow mobile previews, at least the breakpoints).

1 Like
9

the height-calculation of autoheight is correct ... i stated this in the above mentioned thread. it's been a misunderstanding of functionality of the questioner.

///////////

the hypefile in the first post here is without any script (few errors though...) and behaves like expected. means the layoutheights simply do not change ... 900 for desktop and 1000 for mobile ...

///////

those problems occur all the time and the reason for this is that embedding a responsive hypedocument is not possible out of the box. looking forward to the next update :slight_smile: it's really not easy for noncoding folks to create hypedocs that behave responsive within an environment. it needs a better interaction between flexible-layout and responsive documentsettings.

////

back to topic: i suspect (from inspecting the document) that the questioner will need some kind of layoutwatchdog -> a script that monitors the height and scaling of the 'Entire Site'-Group and change docheight accordingly. What does not make sense here is the set fix gap at the bottom of the layouts ...

1 Like
10

Hi

This is how I got around it by setting the scene background to the height that I want to be displayed on a mobile screen. Id the group and on click of the hamburger run the following javascript

document.getElementById(hypeDocument.documentId('compHeight')).style.height = 'Your height px';

In your case on display

You can view it here on mobile

Hope this helps.

1 Like
11

Small code note: the documentId() method doesn't take any arguments. This won't be an error, but could mean the code behaves differently than intended.

12

Thanks for the detailed reply! I have the gap there for the footer that I insert before I upload to the FTP location. But the gap in my video above is far more intense than this.

13

I believe the last point you make there is what I need. I guess it's not possible. Seems odd to me.

Like I was saying to @MaxZieb, the bottom gap I have there is on purpose for my pages to leave space for the footer I insert into the .html file before I upload to the FTP site. As seen here: www.elevatebtt.com

14

Would it be possible to see the code in a hype file and upload it here? I can't seem to understand exactly what is being grouped and how its constructed.

15

Sorry for all the confusion on this. I have since found my solution here:

https://forums.tumult.com/t/creating-a-flexible-tumult-hype-document-within-a-div-with-no-set-height/13224/51?u=jameshawkins

1 Like