Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adaptive Thumbnail
<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>
// 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;
}
}
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.