Responsive and full screen

[mengeco (Pierre)]

Hello,

I’m trying to use responsive functions with a full screen image but it does not work

Thanks
test-full-screen.zip (458.1 KB)

[petester (Peter Borokhov)]

Fixed see below

test-full-screen.zip (454.5 KB)

For the background elements you need to select all and make sure the height it set to 100% as well as width and Flexible layouts to be at the settings below.

I think you may just get away without using break points maybe just for mobile version? For the circles I would orient them to the top in flexible layouts unpin the bottom def play around and see what works best.

[mengeco (Pierre)]

Thanks for your help but it does not work properly when I test responsive rendering (Chrome+Safari).

I spent several hours trying to get a responsive animation but I think this feature may be too complex with Hype.

[petester (Peter Borokhov)]

Please Elaborate what doesn’t work properly. Refer to how this site was created.

https://tumult.com/hype/gallery/Nakuru/Nakuru.hype.zip

[mengeco (Pierre)]

Thank you for this example of site.
test-very-simple-responsive-2.hype.zip (404.9 KB)

I tried to reproduce the example with my file but:

• my background photo is distorted (does not respect the proportions)
• The photo round is offset from the photo background

I simplified my file. There are only two grouped images.

How to make this image responsive without distortion?

[petester (Peter Borokhov)]

see below

test-very-simple-responsive-PB.hype.zip (417.2 KB)

heres another version where I used the circle where its not part of the group.

test-very-simple-responsive-PB-2.hype.zip (417.3 KB)

use the pins to position the start and end movement of elements when it comes to a responsive layouts.

You might just have to treat every element separate of each other and not group everything into one to get the results your looking for. Is there a specific reason why you grouped everything and had different properties for all of the elements within that group?

[mengeco (Pierre)]

1. Thanks but if I click on the height scale option, I have a pb with the export .oam

I use the Tumult Hype Animations plugin in Wordpress and when I display the page, the animation is invisible.

However, if I test the animation directly from Hype, the animation is clearly visible. It’s a problem I never understood and solved

2. If I reduce the image with the browser window, the image is cut off at the top. How to fix the image at the top of the window?

[petester (Peter Borokhov)]

ok provide a url where you uploaded hype .oam

[mengeco (Pierre)]

Tumult Hype Animations

[Daniel]

Hi Pierre,

Sorry you're hitting this issue -- in most cases Hype documents won't appear if you use a height of 100%. Please read the instructions on this page, and especially the troubleshooting section:

Tumult Hype Animations Wordpress Plugin

In the plugin section of your self-hosted Wordpress site, you can download our new plugin by searching for Tumult Hype: If you're curious about the manual (and difficult) method of embedding, visit this post. Using the Plugin Prefer a video? Watch this tutorial First, export your Hype document as a OAM widget without spaces (or the _ character in the file name: [image] Click the Hype Animations Admin section, Click 'Upload' at the top, then drag your documentname.oam file right onto the …

Also see:

Troubleshooting Responsive document in Wordpress Plugin

In the intro to this plugin I wrote It’s important that you only set scaling on the width of your document unless you manually set a min-height using CSS on your Hype animation some other way. In the plugin page you can set a CSS class on your animation which you can then use (in your theme’s CSS area) to set this minimum height. This will get your DIV to show up.

It also seems like we've helped out on this issue before? If you need your Hype document to scale to the entirety of your webpage, it may be better suited to loading it outside of Wordpress so it has no 'frame' or theme around it.