Relationship between groups with responsive heights

Hello. I have a long scrolling document with a series of rows filled with unique content. In order to be responsive to all screen sizes, the content within each row must get longer the smaller the screen is in order to fit. Is there a way to have the Top of Group B always sit at the bottom of Group A no matter the height of Group A?

attached are example images of group B (teal) not staying with Group A (pink) at a smaller screen size.


//

thank you

You can always just use Layouts if you don’t want to get into coding.

thank you. I have layouts currently but I’m winding up with 7+ layouts for each scene because of the complexity of the items in each row. So I’m trying to see if I can make this large project more concise

I understand. You should then think about the right tool for the job. Hype is an absolute positionend system. Meaning you can do lot’s of nice thing around animation, pinning and positions. Even with layouts things are great. If you want to display abitrary text amounts and have stacking order a relative positioned systems maybe better for your needs. Meaning a regular HTML Div container stacking. You can combine the best of both worlds when using Hype with something like Rapidweaver or WordPress (with Elementor, Oxygen or Brizy). Gutenberg is okay but still not quite there yet for layouts.

Thank you for the response. that makes sense. I was just experimenting with the idea of making each ‘Group’ a separate scene and then exporting each scene and stacking them in wordpress divs. Do you know if there is a way to export only one scene to an OAM or would i have to make a different hype document for every scene?

I was experimenting with that recently, too. Here you go…