HTML/CSS for Twitter widget width

Question

The code Twitter gives you to paste in the html looks like this:

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560">Tweets by @username</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>

They allow you to set a height, which I set to 600. When placed on my site I get this (when viewing the source):

<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"></iframe>

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.

So, why is it setting the width to 220, and how can I get it to expand to it's parent width?

Answer 1

I use a responsive theme and this css code works fine. Thanks Hjuster.

#twitter-widget-0 { 
      width: 100% !important; 
    }

Answer 2

Twitter allows you to adjust the width and height of the timeline widget via HTML width and height attributes BUT the minimum width they accept is 220 pixels EXAMPLE: width="220" , height="350"

FROM Twitters developers page: The minimum width of a timeline is 220px and the maximum is 520px. The minimum height is 350px.