You might be aware that a Reusable Element has an issue about responsiveness when you try to hide it.
Basically let’s say when you go under 800px of page width, you’d like to hide your reusable element.
Well wether you’ll “add a hiding rule” from Responsive section (in Design) tab or use a condition on that element or trigger an Event “Do when Current page width<800”, it will still take up the same space as when it was visible:
And a trick to solve that is to use a group as a container:
I spend almost 2 days on trying to figure this out… So I hope it will help some people !
1 Like
You go to the page for the reusable element (listed below your other pages in the upper left nav). Then, design it’s responsiveness on that page. It’ll carry through to all of the pages it’s on.
And, if you want it slightly different in different places, then you can try putting the reusable element in a group on some pages and, for example, making that group fixed width, aligned right, etc.
Thank you for your quick answer @sridharan.s I was recording gif sequence, it took me some time to edit my first message.
Did you try putting the reusable element in a group, and then adding a hiding condition for the group?
Yes indeed that’s the whole point I tried to share here 
Got it. Thanks for sharing! I suspect this will, indeed, help some people.
