title: Use JQuery to modify CSS for content in an iFrame
body: <p>I have a Twitter widget (a Javascript widget that embeds an iFrame) on my site. Previously, I used</p>
  
  <pre><code>iframe[id^='twitter-widget-']{ width:100% !important;}
  </code></pre>
  
  <p>to change the widget width to 100%, instead of default 520px. It worked very well until yesterday. For somehow, that CSS setting on iframe does not work anymore. I checked the iFrame source code, it appears Twiiter adds this </p>
  
  <pre><code>.timeline {
    max-width: 520px;
   }
  </code></pre>
  
  <p>Because this iframe is from twitter, I have no way to use css to modify .timeline. I tried to use Jquery/javascript:</p>
  
  <pre><code>$("#twitter-widget-0").contents().find(".timeline").css("max-width","100%");
  </code></pre>
  
  <p>But it seems only working on console. I put this line of JavaScript in a PHP template file and it does not work. I have tried <strong>body onLoad</strong>, <strong>window onload</strong> and <strong>document onload</strong> and none works. I also put this javascript at the end of my template file and it does not either.</p>
  
  <p>How to resolve this issue?</p>
  
  <p>Thanks,</p>