Hi, is it possible to have an element’s height change responsively- say, have an element that is 50% of screen height for example?
I would love to hear an answer on this as well. I have a website where I would like the large main image to cover the entire screen no matter what screen I use.
Do you mean like a hero image?
Try putting it into a group that spans your entire page and making sure the “fixed width” box is unchecked on the image, container group and the page that it all rests on.
Also, check out the responsive tutorial in the documentation
If I didn’t address your question correctly, let me know!
This will work for the width, but will that work for dynamic height? As far as I know, there’s not a way to currently do this, but I’d love to be proven wrong.
oh, height, oops. my brain just registered width.
Make the group 50% of the size of your website, then change the type of background to image and upload your image? Or if you prefer, change the actual page background style to an image.
I’m pretty sure that’d look awful though, unless it was a subtle background or something heh
I faced similar issue today and the solution is simple. Place the objects in a group and make the group collapsible . When the group is hidden the page height is adjusted.
2 Likes
Hey @AliFarahat, could you share the workflow for that? I haven’t used a collapsible group before. I also haven’t figured out how to adjust the page height.
You can have a group’s height collapse by checking this box within the property editor of the group:
Every time that group is hidden, its height will be collapsed and the page height will adjust too. You can also choose to animate the collapse here:
1 Like
The above reply is right. Also I have noticed that you have to hide all the subgroups that exist in the main group your trying to hide.
So for example if group a has group 1 and 2 placed inside of it. Then you must set those to hide with group a for the height of the page to collapse.
Keep in mind the the height will only collapse if it is hidden.
1 Like
Setting “Collapse this element’s height when hidden” didn’t work for me.
Here is the test project:
Hey @Bilal 
it was because the group’s height will only collapse, once the group becomes hidden. I added a button (“Collapse”) which when clicked, hides the group and adjusts the page height. (Note: you can hide groups using conditional statements as well; in this example I just used the workflow action: hide)
@fayewatson thanks
1 Like