How do I make my hub scroll inside my page?

By default, the TwineSocial Hub does not have a height set. This means that unless the element in which it is embedded has height restrictions, the Hub will expand to allow all content to be visible, and then push the footer away to create more space if more content is loaded. 

For most users this works well. Site visitors get to see the content in an intuitive way as they scroll down your page. But if you have a content-rich footer or have implemented the Hub in the middle of a larger page with important content below it, this will post a problem. 

You may ask, "So how do I limit the amount of space the TwineSocial Hub takes?"

Fortunately, the solution is easy. Since TwineSocial Hubs are completely mobile responsive, they are responsive to whatever styling or limits you have on their parent element. So if you limit the height of your Hub to 800px, the Hub will load and cut off below that. 

There's one more step though. If you only limit the height of the element, users will see the first 800px of content and nothing more. No scrolling, everything cut off. To address this you need to set the overflow on the parent element to "scroll."

height:800px;
overflow:scroll;

Once this CSS is in place on the parent element, your Hub will scroll within a defined window on the host page.