<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="..." alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </div>
画面を小さくしていくと、media-body部分が消えてしまう。ので、解決方法をぐぐってみた。
他者の質問記事にすばらしい回答が貼り付けてあったので、やってみる。(←英語です)
【追記】
上の記事そのままではうまくいかなかったので、ハイブリッドな感じにしてみた。
【問題のコード】
<div class="col-sm-12 col-md-12">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<div >
<iframe width="853" height="480" src=" ****" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="media-body">
<h3 class="media-heading">タイトル</h3>
<p>文章 </p>
</div>
</div>
</div>
【うまくいったコード】
<div class="col-sm-12 col-md-12">
<div class="media services-wrap wow fadeInDown">
<div class="col-sm-12 col-md-9">
<div class="youtube">
<iframe width="853" height="480" src=" ****" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-sm-12 col-md-3">
<h3 class="media-heading">タイトル</h3>
<p>文章</p>
</div>
</div>
</div>
CSS側:
.youtube iframe{
width:100%;
}
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。