Scale symbol to fullscreen on mobile

Responsive
1

Hello folks,

I'm currently trying to do the following:

I have created a symbol in which my content takes place. This symbol is vertically and horizontally centred and adjusts to the size of the browser window.
On the dekstop everything works as desired, but in the mobile view I want the symbol to scale over the whole height & width of the viewport.

Maybe anyone has an idea, how to achieve this?

Here's a preview

I am grateful for any ideas.

2

Is the problem that on mobile, in portrait orientation, it doesn't work? If so, maybe this template will help...

That’s why this landscape-vs-portrait approach can be a handy alternative. This is especially true if you’re aiming for a full-screen experience.

Basically, scenes are switched — with JavaScript — based on the width and height of the device. It doesn't have to be scenes though. You can use Hype's JavaScript API to control a symbol or timeline.

The basic idea is if the width is greater than the height, then it's Landscape. Otherwise, it's portrait. (That assumes the view is not a square.) The article has a link to the template, the example, and it shows the JavaScript code to make it work.

UPDATE: I'm not sure what's wrong here. It seems to work on iPad. Looks nice. :slightly_smiling_face:

3

In general it sounds like you do want the mobile versions to be distinctive, so that's usually a job for Responsive Layouts where you can fully change positioning and elements.

Otherwise I do see you have some CSS code to help with responsive aspects. If you are going to go a CSS or JS route, then a few tips would be:

  • Uncheck Protect from external styles in the Document Inspector so more CSS can pass through to Hype elements (you may still need to use !important on attributes Hype assigns to the DOM nodes)
  • Check Position with CSS left/top so that Hype does not use transforms to position, but instead the style left/top attributes which is more compatible with custom code
  • You may also need to change the Viewport width, probably to "Device width" (see this article)