How to set up twitter's embedded timeline width in percentage (responsive/fluid design)

Question

I\'m looking to set up twitter\'s embedded timeline, it\'s quite easy when you\'re having a fixed design, but that\'s not my case and I\'m actually building a fluid and responsi

Answer 1

Super hacky, but you can also do this :

    <script type="text/javascript">
        var checkTwitterResize = 0;
        function resizeTwitterWidget() {
            if ($('#twitter-widget-0').length > 0) {
                checkTwitterResize++;
                if ($('#twitter-widget-0').attr('width') != '100%') checkTwitterResize = 0;
                $('#twitter-widget-0').attr('width', '100%');
                // Ensures it's checked at least 10 times (script runs after initial resize)
                if (checkTwitterResize < 10) setTimeout('resizeTwitterWidget()', 50);
            } else setTimeout('resizeTwitterWidget()', 50);
        }
        resizeTwitterWidget();
    </script>

Answer 2

This was a helpful thread, thanks. I'm working on a site that uses an older Twitter profile Widget, which I find easier to customise. So an alternative method, uses this to display the feed (customised to suit):

<script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 5,
      interval: 6000,
      width: 300,
      height: 400,
      theme: {
        shell: {
          background: 'transparent',
          color: '#151515'
        },
        tweets: {
          background: 'transparent',
          color: '#151515',
          links: '#007dba'
        }
      },
      features: {
        shell: false,
        scrollbar: true,
        loop: false,
        live: true,
        hashtags: true,
        timestamp: true,
        avatars: true,
        behavior: 'all'
      }
    }).render().setUser('BlueLevel').start();
</script>

Then override the width by adding this to your stylesheet:

.twtr-doc {
width:100% !important;

}

You can see the various classes to modify by using IE9 in compatibility mode, then using F12 Developer Tools to see the html/css.

Hope that helps someone!

Answer 3

You can give your iframe a class, and try to apply CSS to it. At least to change the width to %.