Mobile layout trouble

Dear all,

I created a mobile web site which talk about a travel at Lisbon.
In the preview mode with Safari on Mac all is OK

When I upload on my website, the layout of a page is different with troubles :

You can see the result on the website :
To see troubles follow this way :

  1. Tap menu icon
  2. Tap “Guide de voyage”
  3. Tap" Baixa, Chiado, Barrio Alto"
  4. Scroll and see troubles in the page

I send you the hype files in order to analyse it :
WDP (2.1 MB)

I tested it on iPhone XS and iPhone XR. The issue is on both mobile devices.
But never appears on a Mac.

Thanks for your support.

that’s the weakness of absolute positioning …

one approach:

  1. try to let as much space as possible

  2. add this script on sceneload which will check a given class’ elements for overflow and makes the fontSize as small to adapt the given height …

     function isOverflown(element) {
     const overflow = element.scrollHeight > element.clientHeight;
     const newFontSize = (parseInt( - 1) + 'px'; = newFontSize;
     const classToCheck = 	'checkForOverFlow';
     const sceneEl = document.getElementById(hypeDocument.currentSceneId());
     const divsToCheckOverflow = sceneEl.querySelectorAll('.' + classToCheck);
1 Like

This issue shouldn’t appear. It seems related to some line height or font issue. Hans code solution should fix the symptoms but it doesn’t address the core problem. Either the iPhone doesn’t have the correct font or is changing the line height. The text boxes and other elements are not scaled and only pinned to top left so this shouldn’t happen to begin with. I’d had a similar problem recently and using Helvetica Neue (Light) instead of Helvetica (Light) fixed it for me.


Hm, interesting. The Font is listed as iOS-font. What about Hyphenation?

the line-hight is inherit from the scene and ‘normal’.
if you want 18px Hype does not seem to change it and uses normal.

so you may be better of to set the line-heigth via css.

don’t forget ‘!important’ to overwrite Hypes settings!

may help for more consistent results …

1 Like

ups … saved the edit :slight_smile: