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.

Answer 2

This worked for me.

CSS

iframe[id^='twitter-widget-0'] {
     height:600px !important;
     margin-bottom:10px !important;
     width:100% !important;
}

Javascript

$(window).on('load', function () {
   $('iframe[id^=twitter-widget-]').each(function () {
      var head = $(this).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>');
          }
          $('#twitter-widget-0').append($('<div class=timeline>'));
   })
});

Found this when surfing internet for the solution.

https://wordpress.org/support/topic/how-can-create-full-width-twitter-timeline-on-responsive-page

Answer 3

simple and works: $('.twitter-timeline').css({width: '100%'});

Answer 4

We've found lately that Twitter's fairly new code generator for embedded profile timelines at publish.twitter.com still creates the issue of the timeline overflowing the container width for iOS devices, particularly with width and height settings (and no data-tweet-limit set).

Having tried all of the javascript solutions above to maintain the timelime width=100% of the container, yet constrain the timeline to no more than the container width, we've done so via this added css (with selector potentially proceeded by your additional specificity, as needed):

.twitter-timeline { width: 100vw !important; }

Note that you'll want to be sure the viewport is set, perhaps like so (but as appropriate for your implementation):

<meta name="viewport" content="width=device-width, initial-scale=1">

Note also the old shrink-to-fit=no hack no longer seems to have any effect in modern iOS