jquery - CSS container errors everywhere - Javascript appears when page has shrunk

Question

having an issue with a javascript element.

<a class="twitter-timeline" href="https://twitter.com/Account" data-widget-id="395882390205108224">Tweets by @Twitter</a><script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>

This is linked in with my other question I think but not 100% as this is regarding the JS element.

On JSFiddle it works fine, I can shrink the element and it appears. On my website it doesn't appear unless I shrink the browser down.

http://jsfiddle.net/MLJpY/

Before:

After:

URL: http://profiledt.co.uk/SetTraining/

Answer 1

You assigned a fixed height to the container for this elements.

CSS:

#frontpage-Button-Cont {
width: 100%;
height: 135px;
text-align: center;
}

the height attribute (works in chrome then) or add overflow: auto to have it in a container with scroll bars

#frontpage-Button-Cont {
width: 100%;
height: 135px;
text-align: center;
overflow: auto;
}