iframeでfacebookのタイムラインを埋め込もうとしているのですが、書き込んだコードは以下の通りです。
html
1<!--SNSタイムライン--> 2<div class="container"> 3<h2 style="text-align:center">SNS</h2> 4<div class="row"> 5<!--Twitterのタイムライン--> 6<div class="col-xs-12 col-sm-6"> 7<div class="row"> 8<div class="col-xs-12 col-sm-1"></div> 9<div class="col-xs-12 col-sm-10"> 10<a class="twitter-timeline" data-lang="ja" data-width="456" data-height="500" href="https://twitter.com/xxxxx">Tweets by xxxxx</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 11</div> 12<div class="col-xs-12 col-sm-1"></div> 13</div><!--row--> 14</div> 15 16<!--facebookページのタイムライン--> 17<div class="col-xs-12 col-sm-6"> 18<div class="row"> 19<div class="col-xs-12 col-sm-1"></div> 20<div class="col-xs-12 col-sm-10"> 21<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F(facebookページのID)%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=true&show_facepile=true&appId=109316779649896" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 22</div> 23<div class="col-xs-12 col-sm-1"></div> 24</div><!--row--> 25</div><!--row--> 26</div><!--container--> 27<!--ここまで(SNSタイムライン)-->
要はsm以上の画面幅では、6:6で割って、左側にtwitterタイムラインと、右側にfacebookタイムラインを組みこもうとしているのですが、スマホビューで確認した時に、twitterタイムラインの方は綺麗にdiv幅に収まったのですが、facebookタイムラインの方が余分に右方向に膨らむ形で表示され、操作感としても、若干右方向にスクロールされるような形になってしまいました。
iframeで綺麗にレスポンシブ表示させるにはどうすればいいでしょうか?
私はjavascriptに関する知識が少ないので、可能であればhtmlかcssの追記で済ませられたらと思っています。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/19 11:55 編集
2017/06/19 12:05
2017/06/19 12:20