How to scale all elements and remain relative

Please find attached demo app

As an exercise I am trying to create the following

  1. Background to scale & fill (working)
  2. The top row have the 2 images scaled correctly with the text box all the same height and the text to scale to fit.
  3. Same with bottom row.
  4. Get the centre text to scale so will work on any device.

On an iPhone & iPad (rotated does not work) and scaling on safari does not work as expected.

I have a group at the top pinned top - left - right and the elements inside pinned to all 4 side and scaled.
I have a group at the bottom pinned bottom - left - right and the elements inside pinned to all 4 side and scaled.
The elements inside are all pinned to all 4 side and scaled.
The centre element is pinned to all 4 side and scaled.

What is the correct approach please ?

Cheers

Steve Warby

testScaling1.hype.zip (177.9 KB)

I’ve fixed some things, however, for a proper responsive behavior you should use more than one layout. The text should always have the same size (the right size in each layout).

testScaling2.hype.zip (377.2 KB)

Thanks for the reply.

When on Iphone & iPad in portrait it fails completely.
Is this a problem in Hype or a restriction of HTML itself.

I have also added bigger text box (with larger text) in the centre with a grey background and get the following results.
Iphone Portrait & Landscape fail.
iPad Landscape works portrait fails.
On safari it fails.

Fail means the middle grey box expands outside the others.

Cheers

Steve Warby.

testScaling2.hype.zip (177.3 KB)

In my opinion the "scale" option is useful for animations only and not for building websites. in the web development with hype you can't use elements with variable height, that's all.