Layouts and Responsive

Hey all,

I have an experience I’m building that is ideally viewed at 16:9 aspect ratio, and that is sort of the basis overall. It will both be an iframe embed, as well as it’s own url that takes up the full page.

Is there a way to lock this ratio, or do I have to go the multiple layout route?

Hi @LucasKA

Wow 3 days and nobody came back. Tut tut :smile:

Of the top of my head I’m thinking you can use a javascript function to recalculate the width and height (keeping the ratio) on window.resize. How are your Javascript skills?

if i understand you right

I’m not sure what you’re doing exactly and why, but are you sure you want to do this? Do you know exactly what your viewing devices will be? Otherwise, with a fixed aspect ratio, how can you be sure that your project “takes up the full page”? The browser may be resized to a different aspect ratio or using a mobile device with a different aspect ratio.

It sounds like a bad idea to me, but that may be just because I didn’t get what you’re trying to achieve :wink:

@DBear My JS is solid, and I’ll do that if I have to, but wondered if it was baked in to Hype and how.

@h_classen Thanks for that, there’s some stuff there that helps.

@gxxr I want to keep the whole hype document as a responsive asset that scales. It will be part of a page that has other assets as well. This is only part of a whole campaign.


I’m not sure there is anything “baked” into Hype. Hype does have a “shrink to fit” in the Flexible Layout section of the Inspecto. This effectively keeps the ratio when reducing the window from it’s largest size. This way you could set up your document for the highest screen resolution and have everything shrink to fit. I’m not sure if this will work for your purposes.

Other than this, Javascript would be your way forward. Hype does have built in methods for getting and setting width and height of elements.