<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> </div> <hr> <div class="row row-margin-bottom"> <div class="col-md-5 no-padding lib-item" data-category="view"> <div class="lib-panel"> <div class="row box-shadow"> <div class="col-md-6"> <img class="hidden-xs hidden-sm lib-img-show" src="http://cl.ly/Wi76/Screen%20Shot%202014-07-23%20at%208.37.33%20AM.png"> </div> <div class="col-md-6"> <div class="lib-row lib-header"> <a href="https://campaigns.townsquarelab.com/labtraining/">Lab Training Manual</a> <div class="lib-header-seperator"></div> </div> <div class="lib-row lib-desc"> How to create a postsale project, task and update. </div> </div> </div> </div> </div> <div class="col-md-1"></div> <div class="col-md-5 no-padding lib-item" data-category="ui"> <div class="lib-panel"> <div class="row box-shadow"> <div class="col-md-6"> <img class="hidden-xs hidden-sm lib-img" src="http://cl.ly/WiGp/Screen%20Shot%202014-07-23%20at%208.44.36%20AM.png"> </div> <div class="col-md-6"> <div class="lib-row lib-header"> <a href="https://campaigns.townsquarelab.com/local-sitelist/">Master Doc</a> <div class="lib-header-seperator"></div> </div> <div class="lib-row lib-desc"> Master list of radio stations, websites, etc. </div> </div> </div> </div> </div> </div> <div class="row row-margin-bottom"> <div class="col-md-5 no-padding lib-item" data-category="view"> <div class="lib-panel"> <div class="row box-shadow"> <div class="col-md-6"> <img class="hidden-xs hidden-sm lib-img-show" src="http://f.cl.ly/items/2I302W0X11233T21421z/Screen%20Shot%202014-07-23%20at%208.53.55%20AM.png"> </div> <div class="col-md-6"> <div class="lib-row lib-header"> <a href="https://campaigns.townsquarelab.com/mylab/">MyLab Dashboard</a> <div class="lib-header-seperator"></div> </div> <div class="lib-row lib-desc"> View all presale projects, tasks assigned to you and tasks created by you. </div> </div> </div> </div> </div> <div class="col-md-1"></div> <div class="col-md-5 no-padding lib-item" data-category="ui"> <div class="lib-panel"> <div class="row box-shadow"> <div class="col-md-6"> <img class="hidden-xs hidden-sm lib-img" src="http://cl.ly/Wi0T/Screen%20Shot%202014-07-23%20at%209.00.32%20AM.png"> </div> <div class="col-md-6"> <div class="lib-row lib-header"> <a href="https://campaigns.townsquarelab.com/postsalecampaigns/"> Postsale Playbooks</a> <div class="lib-header-seperator"></div> </div> <div class="lib-row lib-desc"> View/upload/download/find/edit postsale campaign playbooks. </div> </div> </div> </div> </div> </div> </div>

body { padding: 20px; font-family: 'Open Sans', sans-serif; background-color: #f7f7f7; } .lib-panel { margin-bottom: 20Px; } .lib-panel img { width: 100%; background-color: transparent; } .lib-panel .row, .lib-panel .col-md-6 { padding: 0; background-color: #FFFFFF; } .lib-panel .lib-row { padding: 0 20px 0 20px; } .lib-panel .lib-row.lib-header { background-color: #FFFFFF; font-size: 20px; padding: 10px 20px 0 20px; } .lib-panel .lib-row.lib-header .lib-header-seperator { height: 2px; width: 26px; background-color: #d9d9d9; margin: 7px 0 7px 0; } .lib-panel .lib-row.lib-desc { position: relative; height: 100%; display: block; font-size: 13px; } .lib-panel .lib-row.lib-desc a{ position: absolute; width: 100%; bottom: 10px; left: 20px; } .row-margin-bottom { margin-bottom: 20px; } .box-shadow { -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10); box-shadow: 0 0 10px 0 rgba(0,0,0,.10); } .no-padding { padding: 0; } .lib-panel .row, .lib-panel .col-md-6 { padding: 0; background-color: #FFF; max-height: 161px; overflow: hidden; }

$(document).ready(function(){$('.lib-img-show').addClass('hidden-sm hidden-xs');