I’m trying to understand how to setup persistent symbols so they scale properly in different device sizes. It seems that resizing a symbol’s width should also affect the items inside it, but in Hype it doesn’t.
How can I make a footer scale horizontally, but on mobile reformat it so the menus are stacked?
The attached hype document should demo the question.
persistent responsive footer.hype.zip (83.1 KB)
No. It won't work that way and it shouldn't. Hype is right the way it works. In case of graphic designing applications, resizing a group resizes all the contents within it. But, in web design context, there are no real groups. The web has <div>. Each group in Hype is basically a <div> and scaling the parent <div> doesn't scale its contents. You have to manually do it. It is necessary because in more advanced projects, groups are a way to mask content.
Hype has responsive options per element. First enable scaling in the scene properties and then, you can set elements to scale.
Add a seperate layout and customise it as needed. You might want to refer to this: Layout for screen rotate (iphone) - #2 by Hrishikesh.
Thanks Hrishikesh.
Are you saying that I have to maintain multiple footer symbols for each layout (mobile, tablet, desktop, etc)?
I do understand how html differs from design apps. But when creating a master div component that I want to reuse across a site, I want the content it contains to reflow at different breakpoints, and behave differently within them. Wrapper divs do this all the time.
Do you have any suggestions on how to fix my example document? Other than creating four different footers I have to keep in sync? I suppose I could nest symbols inside the footer so the footer is no longer a symbol, but rather a simple group.
Hypes strength is animation. therefor its approach mainly relies on absolut positioning. So … reflow including a redesign is actually not doable without scripting those absolute positions. Yes, you can do some pinning and resizing … but that’s it. Building a whole website is doable – results may be great – , but has not so much in common with usual webdev.
to get some ideas check out hypedocks.com …
Ah, yes. That makes sense. I’ll just break the symbols into smaller parts and use groups for layouts. Thanks for the link, @h_classen!