Question

So my website can resize based on screen size, but when I implemented a Twitter widget, when I tried resizing it, the widget, despite having the attribute width:'auto' did not resize. Here is the code for the widget:

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 2,
  interval: 30000,
  width: 'auto',
  height: 100,
  theme: {
    shell: {
      background: '#dbdbdb',
      color: '#000000'
    },
    tweets: {
      background: '#dbdbdb',
      color: '#000000',
      links: '#000000'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('jackstonedev').start();
</script>

And here is the CSS for the widget:

#twittercontainer
{
    border:3px solid;
    border-radius:20px;
    background-color:lightgrey;
    opacity:0.7;
    max-width:500px;
    margin: auto;
}

Answer 1

Try resizing by using % instead of auto.

If the parent div then resizes your widget should aswel, for example if you set your widgets css to

#widget { width: 90%; }

if the parent div is 100 pixels wide, your widget will be 90 pixels wide.
I Hope this works for you.

What might also be a problem is that if the twitter widget is loaded via iFrame / or JS generated, it might assign CSS values aswel, these can override your own set values since they are set when/after the page is loaded. Try inspecting the widget itself in the HTML source and see what is happening to it.