Embedded timeline flows outside <div> on iPad

[Freeweelin]

Hi…

I have an embedded timeline that looks fine on all desktop browsers but on the ipad using safari and Chrome the timeline spills outside of the div on the right hand side. Remains contained on the other 3 sides.
CSS for the containing div as follows…

#mainTop {
    max-width: 46%;
    float:left;    
    background-color:#fff;

As you can see…nothing complicated!!

You can see it at www.freeweelin.com (on iPAD)

I manually set a width in the anchor element. This was reflected in the desktop scenarios no effect whatsoever on the iPAD.

<a class="twitter-timeline" href="https://twitter.com/LainesmeadSch" data-widget-id="664447718815883264" width="200">Tweets by @LainesmeadSch</a>

Any ideas…please?

Thanks

[Freeweelin]

To make sure no other elements CSS was inherited/affecting it I have created a test page with just the following CSS code.

<style>
#mainTop {
    max-width: 300px;
    border-bottom-right-radius: 1.5em;
    border-top-right-radius: 1.5em;
    border-top-left-radius: 1.5em;
    border: 0.3em solid #FDBB30;
    margin-bottom: .6em;
    -webkit-box-shadow: 3px 6px 11px 0px #868686;
    box-shadow: 3px 6px 11px 0px #868686;
    padding: 0.3em;    
}
</style>

…and HTML

<div id="mainTop">
    <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/LainesmeadSch" data-widget-id="664447718815883264" >Tweets by @LainesmeadSch</a>
<script>!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>
  </div>

www.freeweelin.com/twittertest.html

Thanks

[Freeweelin]

Solved…by adding the following to the anchor of the twitter snippet the timeline scales properly within the div…

data-tweet-limit="3"

Where 3 is the number of tweets you want it to display.

[niall]