Изменение размера виджета 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

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

Если родительский DIV затем изменяет свой виджет должен aswel, например, если вы установите виджеты CSS для

#widget { width: 90%; } 

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

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

Answer 2

положить виджет в обертке и изменения ширины к ширине: «100%»,

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

Answer 3

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

Answer 4

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

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

    float: none; 
    width: 100% !important; 

} 

Answer 5

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

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