Site posted, but not correct after uploaded to server

Thanks Jim. A compressed Hype file is attached. (143.4 KB) (438.0 KB)


Here’s the general idea - You will need to fine tune it - or make other adjustments to suite your needs. I’ve only had time to look at the “home_scene” but this should at least point You in the right direction for further investigation (e.g. do a Forum search for “flexible”; also Hype on-line documentation Flexible Layout).

Hype Project: (103.1 KB)

Basic Steps

Fig. 1) Grouped all the elements in the Scene (“Timeline” layers).
Fig. 2) Set the Scene to allow scaling (“Scene Inspector”).
Fig. 3) Set the “Flexible Layout” parameters (“Metrics Inspector”).

Fig. 1


Fig. 3

1 Like

I will give it a try. Before I apply it to all my scenes and symbols, why would I need to group all the elements?


You group them so they are all acted on as a single unit. The best way to see the effects of grouping the elements is to ungroup them (keeping everything else the same) and see the difference.

There is more to “Flexible Layout” than what is shown in my demo. @michelangelo is a master of using this Hype feature. Check out his HypeDocks site - such as the “Fluid Columns Kit” - for excellent examples on this and other topics… a great learning resource!

I have done a bit of practicing with “Flexible Layouts” to truly understand its capabilities, and know how to get the effect I want (or know if the effect is possible) without a lot of trial and error when the time comes to use it in an actual project.


I need you to weigh in on this nightmare I am facing…
My pages are cut off at the bottom and I have no idea why. I don’t use animations at all in hype so it is just a page issue. My page width is 1240 x 1200 although I would like it longer. I can see no area anywhere on your site that speaks to real life page sizes. Jonathan, am I missing something here…how can there be a preset for 600 x 400 as a website.

I put in 1240 x 1600 and proceed to build my stuff into place. Everything looks great and when I preview…most of my pages are cut off at the bottom and I cannot see the footer etc. So please if you will, give me some direction as to what or where to go with this. If you can remember years ago, you and I spoke via phone and I was one of your first customers. From then until now I have not successfully completed a single site mostly due to very slow response to help requests from the forum. But now I see Hype Pro which I am using and I want to give it a try.

Please Jonathan help me get past this… Dave

Hi David!
I responded to your first posting on this topic a short bit ago…

You have made a cross-post that is not germane to this thread. Please stick with your topic.

BTW: This Forum is a voluntary group - not a paid help line. Your work is your responsibility.

1 Like

Not sure why you’re using Hype in the first place as this is mainly what it’s used for. Hype is for building animated HTML5 (granted you can just use it for static content) but mostly it is to help animate DOM content. I personally wouldn’t use it for building a website especially if it’s only HTML5.

This is not a preset for Web but the default size for animations when first opened. There are 3 “Web” presets but you have to understand these are not for “pages” but for animations at that size. Browsers almost inevitably have continually changing viewport sizes which is why there are many topics and issues relating to this here.

It’s great that you’ve been a customer for all this time and I’m sure the team at tumult appreciate this. But, as Jim mentioned above. The forum is a place where like minded users offer help and guidance to each other and not a paid support service and even though the guys at Tumult often post here it’s again not an invitation to have tailored service by them. They have a means in which to “report an issue” inside of Hype if you indeed have an issue with Hype and the way it’s working.

I fear though that some of your posts are down to not completely understanding the software. I don’t mean to be blunt but that’s only my opinion.

Also, as mentioned previously. There could be many reasons why your document is not acting how you think it should be acting SO posting a document or even a website that you have with the issues and we can better tell what it is that is going on and offer guidance or solutions.

I posted suggestions and a template time ago, no reply :slight_smile:

1 Like

Hi Michaelangelo. Jim Scott thought you might be able to help me with flexible layoust. I am attaching two screen shots. The first one is what my home page looks like in Safari on my phone and the second is what it looks like in hype. It looks like it is compressed vertically, but I cannot find settings that would scale it in proportion. It might be that my browser is not refreshing even though I cleared all history and shut down the phone. Do you have any suggestions?

Here’s a template I posted a while back with a similar structure for multiple layouts: Share your Templates

I think the key thing that will help you here is structuring your content into groups and setting specific pinning properties on those groups. The specific issue above looks like you have flexible layout set on the height dimension of your document, so things are getting squished up. I recommend letting the height flow naturally, but being strategic about how your elements fit the width of the available space.

Thanks Daniel. I didn’t know you could make the height of the preset longer and uncheck height scaling. It make sense and helps to see a sample.

Hi Daniel,
The template works for the phone. but not for the web. I just need all the elements to scale as the browser window gets smaller. Could you send a sample of the web only. I tried Scotts suggestion of pinning all and grouping, but that didn’t work.

Here’s how it looks on the web: – What do you mean that it doesn’t work?

This might help?

I don’t think having everything get smaller as the viewport gets smaller is a good way to go about this, but you can do this by using the above technique.

Sorry the delay but I was busy.

I can not identify the problem, but it probably depends on the “flexible layout” panel settings and the maximum width of the object (or group that contains other objects).

Try to leave more space between the elements and not use the “scale” option for the toolbar.

I been working on my site since February, and have tried all different combinations of grouping, symbols, layouts, and scaling. I have tried pinning top and sides. I have tried pinning top and left, I have tried pinning all and scaling all and get different results on my browser for each scene, even though the hype document is consistent.
This morning, I plugged in my phone and tested it on the safari developer tab. I am grouping all my elements including symbols and using the width of my iPhone 6 portrait, iPhone 6 landscape and computer layout as the break point. The scale setting is set to expand to fit and it is not scaling for the different size phones. Can someone who really knows hype help me. Here are the screen shots.

The layout that matches iPhone 6 portrait is fluid or fixed width?
Under 768 pixels all layouts should be elastic (variable width layout)

Hi Michelangelo,
Is there a sample template to have the user click on a previous and next button to to back to and advance images manually? A zip file would be appreciated. They have helped in the past.

I’m not sure to iunderstant the question. An image gallery?

Hello. I am attaching two screenshots of my website. The first is the breakpoints of the 5 layouts I am using. The second is of my desktop window when I drag it so it is smaller. Can you advise me on the correct breakpoint to make my website work smoothly? Thanks.


Have You seen @h_classen’s recent post? It may be what You are looking for…

1 Like