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 responsive design for a new website.

My question is, how can I set up twitter's embedded timeline with a fluid width since its an iframe and you're supposed to set up the with in px in your twitter account ?

Thanks :)

Answer 1

This seems to work for me:

  #twitter-widget-0 {
    width:100%;
  }

where #twitter-widget-0 is the iframe it generates, placed in an appropriately-styled container. It's not perfect: the widget generates its contents a bit differently depending on width, and margins, etc. won't be exactly the same after resizing; but this seems minor.

I'm curious as to why simple CSS didn't work for you - sorry if I'm missing something.

Answer 2

Thanks to all of you I found my way through: It was almost as lack said, but we had to focus on the iframe instead:

.MyClassForTheDivThatContainTheiFrame iframe{
    width:100%;
}

of course .MyClassForTheDivThatContainTheiFrame is also fluid with a % width

Answer 3

This logic will work to change at least the width and height:

#twitter-widget-0, #twitter-widget-1 {
  float: none; 
  width: 100% !important;  
  height: 250px !important;
}

The only problem with shortening the height is that it hides the text box for people to send tweets but it does shorten the height. My guess is that if you want to add other CSS styling you can just put the !important clause. I also assume that if you have three widgets you would define #twitter-widget-2, etc.

Answer 4

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 5

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 6

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

Answer 7

This is not possible. You can set an exact width and height using the html width and height in the anchor tab. Other than that you are out of luck. No responsive or fluid capabilities.

It also has a min-width of 220px and a max-width of 520px.

<a class="twitter-timeline" width="520" height="700" data-dnt=true href="https://twitter.com/vertmob" data-widget-id="WIDGET_ID_HERE">Tweets by @vertmob</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Answer 8

If you absolutely must do a fluid, you can code a javascript that changes that iframe's width after a resize event or using some javascript timers.

Can we see some code of yours to make some js code for this?

Answer 9

Attribute selector should work:

iframe[id*="twitter-widget"] {
  width: 100%;
}

More here.