Problem in responsive and in the use of pins


Goodmorning everyone!
I’m new on this forum, but I wanted to congratulate you for the community that has been created and especially for this wonderful program that is Tumult Hype!

I write to you because I need help, I can not understand the functioning of the pins and then the responsive on the various devices.

I am attaching a photo to make you understand the structure of the project:

I tried to bring this layout back into a Hype document, but I can not get it to work properly because the elements are moved incorrectly when resizing. For incorrectly I mean that the screen does not remain exactly half-divided when it is resized, and at the same time the texts move differently than the background.
I am attaching the example Hype file where I tried to report the structure. (1.5 MB)

Can someone explain how I can achieve my project?
Or make me understand the correct functioning of the use of the pins?

I hope I have explained well my problem.
Thank you so much for the help

(strmiska) #2

all you´ve to do is, put all together in one group-folder, pin to all sides, make the blue cross
and say: “Adjust size”, but activate - zoom content.
for me then it is working, deviding the screen in half on all screens.

(sa1) #3

Hello @samsara,
One technique to deal with complexe responsive layout is using grouping. When you group elements it actually create a div that contain the grouped elements.
The pin setting define how nested elements react against their parent groupe (for the top level groups their parent is the viewport).

So you need to create one group that contain your image and one groupe that contain your menu. You set the pin of the groups as described in the above reply then set the pin of your groups nested elements considering how they should react with respect to their group resizing