How do I always display a Group container in the horizontal and vertical center of the screen?

[tillkrueger]

Since I am unable to figure out how to properly control all the breakpoints for responsive versions, I am wondering how I can get all the elements which I grouped together to always display in the exact center of the browser window, no matter whether on mobile, tablet, or desktop.

As it is, on taller screens, like the iPhone 13 Pro Max, what should be vertically centered appears in the top 2/3rd of the screen, and on older devices, in the lower 2/3rd, on some devices elements are even running off the screen at the bottom.

I know that the aspect-ratio of screens has a lot to do with it, but how do I get smooth responsive scaling/positioning of elements from one break-point to the next, and how do design for modern tablets like that iPad Pro M1, which actually show the desktop version of the responsive layouts?

Since I have too many questions about proper use of breakpoints and responsive layouts, I want to just get a simple solution working, until I understand responsive design better, so...

What settings do I need to change for a Group of elements to always be centered, vertically and horizontally?

[Daniel]

Select your element (it could be a group containing everything) you wish to be 'pinned' to each side of your Hype scene, then choose these options in the Flexible Layout Properties:

Set your scene size to scale to 100% on both W and H:

That's it!

Keeping your 'Viewport Width' set to 'Document Width' will ensure that your scene size's width is the smallest your document will display in mobile devices. This will require that you directly load your Hype document from the .html file exported from Hype and not embed your Hype document elsewhere.

centered_v_h.hype.zip (18.8 KB)

[tillkrueger]

YES!!

Thank you so much, Daniel! That sure was easy, when you know what to do!

Much appreciated!