Retrofit a Responsive design?

(Dan) #1

Hype-newbie, and just using the trial version right now (so time-limited to see results, etc).

I had created an animation that is almost as I want. I didnt change the canvas size when creating, so its now a 600x400 size, specifically so it would be embeddable in my Wordpress site.

Now I have gotten close to the final animations, I tried the site on my iPhone, and its horrible.

Coming back to Hype, and its documentation, there are “Responsive Layouts” under the Pro verison. So I have flicked my trial version to this and added in an iPhone Layout.

However everything gets cut off, and not scaled.

Is there a simple way to just shrink the total size retaining ratio constraints, and that will work through to the embedded Wordpress posting? Or is the whole topic just much more complicated than this?

(Hans-Gerd Claßen) #2

(Dan) #3

Thanks Hans

I followed some tutorials which showed the basic methods for different Layouts. Initially, it is not obvious that with a different Layout selected, you can simply move / resize / etc, the existing content and it will only affect this Layout. Mostly, I used the Scale % on the new objects around 60-62% of the original and moved some things around on the canvas.

Next problem is getting it to work on my self-hosted wordpress site. It is using the Customizr theme, but the page template has full width and on these pages there is only the single central column (i.e. no sidebars).

I have exported the HTML5 to a folder. I have tested it in the local generated html file with Safari’s Responsive Design Mode.

I upload all the files in the “resources” folder onto my wordpress site, copy the appropriate div text and correct the “src” paths within the blog post / page. Basically followed an official Youtube video about how to do this.

In Safari’s Responsive Design Mode, if I shrink it below 766 px width, the animation disappears and does not show, let alone play. As soon as it is larger than 766 px, it plays as expected.

Any help?

(Hans-Gerd Claßen) #4

you may add a link and hypefile to help people help you :wink:

(Dan) #5

Thanks again Hans

I kept on testing and researching. Another Tumult article resolved the issue for me (as the actual animation was working fine, just not on Wordpress).

Basically, I made sure it was pasted onto 1 line. Tested, and it worked.