Adaptive Thumbnail

Adaptive Thumbnail.markdown

Adaptive Thumbnail

A more mobile-friendly Twitter Bootstrap Thumbnail

A Pen by ZHAO zike on CodePen.

License.

index.html

<div class="col-md-3 col-sm-4">
  <div class="my-thumbnail clearfix">
    <img class="img responsive" alt="?thumbnail max width=300&url=http%3a%2f%2fcouleursapp" src="https://api.url2png.com/v6/P5329C1FA0ECB6/ff3439e3ad5d1f7babaac387248929bf/png/?thumbnail_max_width=300&url=http%3A%2F%2Fcouleursapp.com%2F">
    <div class="caption">
      <h4 class="title" title="Coleurs">
<a href="http://www.producthunt.com/r/f6f1693154/11029" target="_blank">Coleurs</a>
</h4>
      <p class="tagline"> Simple app for grabbing & tweaking colors you see on screen.</p>
    </div>
  </div>
</div>

style.css

// General Thumbnail Setting
// breakpoint, 500, 768px
// 改成了2个media query
// 1. 以下为Twitter Bootstrap原来的代码, 只是改了下名字，thumbnail -> my-thumbnail, 不做Overwrite
@media (min-width: 768px){
  .my-thumbnail {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: block;
    line-height: 1.42857;
    margin-bottom: 20px;
    padding: 4px;
    transition: border 0.2s ease-in-out 0s;
    img {
      display: block;
      height: auto;
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
    }
    .caption {
      color: #333333;
      padding: 9px;
    }
  }
}

//2. 以下为对应于手机新增的adaptive design
@media (max-width: 768px){
  .my-thumbnail{
    border-top: 1px solid #e6eaed;
    padding-top: 15px;
    padding-bottom: 15px;
    .img{
      float: left;
      overflow: hidden;
      width: 180px;
      @media (max-width: 500px){
        width: 80px;
      }
    }
    .caption {
      margin-left: 195px;
      .title{margin-top: 0;}
      @media (max-width: 500px){
        margin-left: 90px;
      }
    }
    .tagline{
      @media (min-width: 500px){
        height: 70px;
      }
    }
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />