Just discovered this cool little workaround for forcing height or shrinkage in groups. I have no idea if this is common, but I have seen this question on the forum a lot, and I have a solution that may help.
I’m using it to shrink the height of my page’s “hero image” group. So that when the page size shrinks for mobile, I can collapse the height of the group so it’s not so tall. And this also avoids having to use hiding rules, which will keep the amount of duplicate elements for purposes of responsiveness to a minimum.
First, in the group’s height you want to control, create a text element the full (or max) height of the group it’s in. Place it at X= 0 and make sure its width is also 0. Remove any text in the text box, and make sure that “shrink this elements height as the text gets shorter” is checked
make sure the element is NOT visible on page load, and that the text color is TRANSPARENT Font size can be whatever you like, but this will effect how the height scales
Now, create a conditional for when the screen size hits a certain point, and add random text to control the height you want either before or after this
If you have elements near this like I do (the “we’re data nerds” title etc) you need to group these elements and set that group to “Collapse margins” to the same screen width or more as your conditional for the text group. The responsive engine will shove your elements to the left to maintain the original margins between our hidden text element , so this is necessary to keep this centered in this case, your case may vary. Just keep an eye on it while you’re bubbling
And that’s it. Now when the screen size shrinks past the number we specified, your groups height will hug the tallest element within it.
Hope someone can find this helpful. It definitely solved my problem.
