Responsive Text Blocks

1

Hey
I have a scene in which there are many text blocks under each other.
If I make my screen smaller, I want the text blocks to keep their spacing. The text fields are currently overlapping. I tried this:

	<style>

.margin {
margin-bottom: 40px !important;
margin-top: 40px !important;
}

</style>

Is there a simpler way to do this without so many layouts?

2

Maybe you're looking for "CSS Media Queries"... https://css-tricks.com/css-media-queries/ ...where you can apply certain styles based on the width of the screen.

3

If you are using Hype and each text block is a distinct element, there isn't an easy way to have them keep their spacing if the text (font) size is constant but their container grows. This is because Hype absolutely positions elements.

The basic workarounds are:

  • Keep all text in a single element
  • Use different Responsive Layouts that approximate the changes you need
  • Use Flexible Layouts that uses "Zoom contents" to scale the text sizes. With this you can keep items positioned relative to the container, but then since the text resizes they can resize together.
  • Use a different tool for the text heavy portions (but keep using Hype for the animations/interactivity!)