Изменение размера виджета Twitter в зависимости от размера экрана

Question

Таким образом, мой веб-сайт может изменять размер в зависимости от размера экрана, но когда я реализовал виджет Twitter, когда я попытался изменить его размер, он, несмотря на наличие атрибута width:'auto', не изменился.Вот код для виджета:

<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>

А вот и CSS для виджета:

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

Answer 1

К сожалению, вы не можете сделать это с новыми виджетами Twitter, а старый API должен быть скомпонован в марте 2013 года, но я написал кое-что о том, как решить его с помощью новых виджетов здесь, используя jquery, хотя и довольно упрощенный подход: http://tappetyclick.com/blog/2012/12/20/how-dynamically-resize-new-twitter-widget

Answer 2

Я использовал это:

$('#twitter-widget-0').height($('#ID_SIMILAR HEIGHT').height());

Answer 3

Мне удалось изменить ширину двух виджетов до 100% в моем приложении Rails, добавив следующий код в мою таблицу стилей:

#twitter-widget-0, #twitter-widget-1 {

  float: none;
  width: 100% !important; 

}

Answer 4

поместите виджет в оболочку и измените ширину на ширину: '100%',

это должно работать так, как вы ожидаете.

Answer 5

Попробуйте изменить размер, используя% вместо auto.

Если родительский div изменяет размер вашего виджета, то, например, если вы установите для виджетов css значение

#widget { width: 90%; }

если родительский div имеет ширину 100 пикселей, ваш виджет будет иметь ширину 90 пикселей. Надеюсь, это работает для вас.

Проблема также может заключаться в том, что если виджет Twitter загружается через iFrame / или сгенерированный JS, он может присваивать CSS-значения aswel, они могут переопределять ваши собственные заданные значения, поскольку они устанавливаются, когда / после загрузки страницы. Попробуйте проверить сам виджет в источнике HTML и посмотрите, что с ним происходит.