2017年3月14日火曜日

Bootstrapのmedia objectがレスポンシブにならない件



<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="https://www.youtube.com/embed/****" 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="https://www.youtube.com/embed/****" 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%;
}







2017年2月21日火曜日

Owl Carousel

前に作ったWPに組み込まれてて便利だなーと思ってたツール。

検索して見たら、これだった。



便利なのでメモ。

どう便利かというと、

1)エリア内でカルーセル可能
2)カラムの大きさも自由自在
3)何個でもアイテム追加可能

リンクに行けば、デモあり。