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 :)

Prescriptible

Answer 1

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

Prescriptible

Answer 2

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.

Likeness

This works but you may have to change the number on the end of the id. For example, my id was #twitter-widget-3. You also may need !important since there is inline styling on the widget iframe. – Disappoint

UPDATE JUNE 25, 2015 It seems twitter has changed the code again. This time they have set the max-width of the widget INSIDE of the iframe (i.e. on code generated from their website). Because of this, there’s nothing I can do to target CSS generated inside the iframe (because of cross-domain restrictions) – Nica

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.

Serrell

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>

Gomulka

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!

Dayton

Answer 6

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

Sportive

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>

Flanna

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?

Thirteenth

Answer 9

Attribute selector should work:

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

More here.

Metabolize