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

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 2

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 3

Attribute selector should work:

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

More here.

Answer 4

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 5

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 6

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>