title: HTML/CSS for Twitter widget width
body: <p>The code Twitter gives you to paste in the html looks like this:</p>
  
  <pre><code>&lt;a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560"&gt;Tweets by @username&lt;/a&gt;
  &lt;script&gt;!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");&lt;/script&gt;
  </code></pre>
  
  <p>They allow you to set a height, which I set to 600. When placed on my site I get this (when viewing the source):</p>
  
  <pre><code>&lt;iframe id="twitter-widget-6" classname="twitter-timeline twitter-timeline-rendered" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " width="220" height="600"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The 220 width is what is killing me. I want the width to be the full width of the container, which is 100% (for a mobile site). Currently the 220 width goes a little more than halfway across the page and displays an ugly scrollbar.</p>
  
  <p>So, why is it setting the width to 220, and how can I get it to expand to it's parent width?</p>