How to not stretch Text in responsive document


#1

Hi everyone,

I am trying to achieve a simple responsive Banner that has two rectangle elements that always stretches across the whole site. basically what let me do this the easiest is using “Zoom Contents”, but this will stretch the text itself, not just the text box.
I tried doing this with somethign similar to the 4_columns_with_images.template (4 equal sized images side by side in horizontal band), but with no success.

I attached the file I have right now, I guess this has to be done without “Zoom Conetns” and with a more sophisticated group setup, but so far I had no luck doing it and some advise would be very much appreciated.

responsive_example.hype.zip (1.9 MB)


(Jonathan Deutsch) #2

Correct, you’ll need to turn off Zoom Contents for the text to not change in size. I’m not entirely certain on the desired effect, but you probably will want to also turn off the matching left/right pins. When both left and right pins (as well as top and bottom) are on, then it prioritizes preserving the margins on both sides. If none or one pin is turned on then it will preserve one margin, and allow proportional growth, which is what I’m guessing you’d want. I attached a possible way to be flexible with this doc:

responsive_example-modified.hype.zip (1.9 MB)


(Ken Heins) #3

Great explanation!


#4

Thank you so much, this is actually better than what I had in mind. Adding a mobile layout will make this work exactly how I want it.

Thanks again, very helpful!