Twitter embedded timeline 100% width

Question

I have a Twitter embedded timeline running on this page.

Via CSS, I've added the following class:

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

Up until yesterday, this CSS was successfully extending the timeline to the full width of the content area, but today the style does not work.

I can see that Twitter have the following style running within the iframe:

.timeline {
     max-width: 520px;

I assume this is something that Twitter have added recently. Is there anything I can do to overwrite this? I've tried adding the following to my CSS class, but it hasn't worked:

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

I'm aware that I can tap into the Twitter API to create a custom feed, but we do not have access to the artists Twitter account to generate access tokens etc.

Answer 1

As mentioned twitter currently does not allow for its timeline widget to get 100% width. For responsive sites this is a pain but there is a solution (for now).

Use a callback on the twitter embed script and point it to a function that alters the iframe styles.

Solution Using Jquery

Replace you twitter embed code (under the <a> tag) with 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 would need to be made if more than one timeline widget on a page.

May not wont work on some older IE browsers.