responsive-design - FbウィジェットとTwitterウィジェットをレスポンシブにする

Question

FbウィジェットとTwitterウィジェットをすべてのデバイスでレスポンシブにする方法は？iframeの幅を100％に設定しようとしましたが、スマートフォンで見ると、レイアウトが伸びて横スクロールバーになります。これはYouTubeのビデオにも起こります。

Answer 1

試す：

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

Answer 2

ツイッターに！私が見つけた最も簡単な解決策は、css を使用することです。.twtr-doc クラスを幅 100% に編集します。

FB の場合 (ボックスのように話していると仮定)、最初の幅を auto に変更し、2 番目の幅 (インライン css) を 100% に変更しました。例としてコカコーラを使用します...

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcocacola&amp;width=auto&amp;height=395&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=false&amp;appId=176993455739426" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:395px;" allowTransparency="true"></iframe>

Answer 3

.twitter-tweet{
   width: 100% !important;  
}

id #twitter-widget-0 の代わりに class を使用します。これは、Web サイトに複数の Twitter フィードを追加すると、最初のツイートのみが選択され、それに css が追加されるためです。