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

iframe twitter responsive-design timeline fluid-layout
Miles M. picture Miles M. · Sep 9, 2012 · Viewed 28k times · Source

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

Lack picture Lack · Nov 18, 2012

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.

Related questions

Twitter OAuth via a popup

I was wondering how to do twitter OAuth via a popup, i.e. load up the Oauth page in a popup and make the callback close the child window and reload the parent window. Edit: OK iframes are bad, but …

Read More
How to apply CSS to iframe?

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

Read More
Make iframe automatically adjust height according to the contents without using scrollbar?

For example: <iframe name="Stack" src="http://stackoverflow.com/" width="740" frameborder="0" scrolling="no" id="iframe"> ... </iframe> I want it to be able to adjust its height according to the contents inside it, without using scroll.

Read More