BlocsApp Responsive Problem

[sdisbrowe (Stephen)]

Hi everyone,

I am a new Hype user and I am very impressed! I am currently using BlocsApp to design my website and have no coding/advanced knowledge at all.

I am trying to design an animated carousel banner with Hype which I have managed to do to my satisfaction thanks to the easy-to-use software. I have downloaded the Hype Bric for Blocs and it looks great. However it isn't responsive so most of the banner is off the screen when viewed on anything smaller than a PC monitor.

I have seen how to make the banner responsive by using the "flexible layout" and adjusting the pins and "shrink to fit" options to make the banner responsive. On the preview it works really well and I am very pleased.

Unfortunately when I then import it into Blocs, it doesn't show - there is just a blank space. I feel that it is something to do with the flexible layout settings but my knowledge isn't strong enough to understand what the problem is. Can anyone help?

[MaxZieb (Loves Hype)]

This similar question/post from today might help you solve your problem:

Hype slideshow issue

Here are two template outlining the different approaches: Flexible Slider All axis are flexible. Content is placed in the sliders and pinned to a side. Don't pin the containers for the slider or the slides, though. FlexibleSlider.hype.zip (15,4 KB) Auto Height Slider This version uses proportional scale and changes the height according to the width. Pinning is irrelevant in such a setup, at least in the content. Again, don't pin the containers for the slider or the slides, though. AutoHeight…

[Daniel]

@sdisbrowe

Unfortunately when I then import it into Blocs, it doesn't show - there is just a blank space. I feel that it is something to do with the flexible layout settings but my knowledge isn't strong enough to understand what the problem is. Can anyone help?

This might be related to the 100% height you have set for the Hype scene, and Max's suggestion might help. If the element you're placing your Hype document into (in Blocs) doesn't have a height, then the height of your document will be 100% of zero ( 0 ).

[sdisbrowe (Stephen)]

Thank you @MaxZieb and @Daniel for your suggestions. I think Max's flexible slider is what I am looking for. I need the width to be responsive and the height should change relative to the width so that the ratio remains the same.

I have imported Max's "flexible slider" example into Blocs (without making any changes) and it still doesn't show.

The "auto height slider" example does work so I think you are on to something.

[MaxZieb (Loves Hype)]

The flexible slider doesn't set any height. It is set to 100% height of the parent node (like @Daniel explained) meaning you would have to create a wrapper actually setting the height for you or just defining it in the height options in the Hype Scene panel (not enabling the 100% checkbox). You could also set the height using a CSS class and using a height defined in a unit like px or vh. I started a page on Hype Cookbook on the topic but it's still Work In Progress:

Manipulating scene height

worldoptimizer/HypeCookBook

[sdisbrowe (Stephen)]

Thank you. I have not understood everything you have said. I am sure it makes sense and is correct but I am at a very low skill level on Hype at the moment. However, using Max's example as a template I have managed to get my banner as I desire and it seems to be perfectly responsive on Blocs.

Thank you both so much for your help. I am truly grateful.