html - Twitter embedded timeline 100% width -

i have twitter embedded timeline running on this page.

via css, i've added following class:

.twitter-timeline {      min-width: 100% !important; 

up until yesterday, css extending timeline full width of content area, today style not work.

i can see twitter have following style running within iframe:

.timeline {      max-width: 520px; 

i assume twitter have added recently. there can overwrite this? i've tried adding following css class, hasn't worked:

.twitter-timeline {      min-width: 100% !important;      width: 100% !important; 

i'm aware can tap twitter api create custom feed, not have access artists twitter account generate access tokens etc.

as mentioned twitter not allow timeline widget 100% width. responsive sites pain there solution (for now).

use callback on twitter embed script , point function alters iframe styles.

solution using jquery

replace twitter embed code (under <a> tag) this.

            <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";                             js.setattribute('onload', "twttr.events.bind('rendered',function(e) {responsivetwitterwidget()});");                             fjs.parentnode.insertbefore(js,fjs);                         }}(document,"script","twitter-wjs");                      function responsivetwitterwidget(){                         var widget = $("#twitter-widget-0");                         var frame_style = widget.attr('style');                         widget.attr('style', frame_style + ' max-width:none !important; width:100%');                         if(widget) {                             var head = widget.contents().find("head")                             if (head.length) {                                 head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');                             }                             widget.append($('<div class=timeline>'));                         }                     }                 </script> 

adjustments need made if more 1 timeline widget on page.

may not wont work on older ie browsers.