Creating Google Now-esque cards using Twitter Bootstrap's media class

Recently I've been working on redeveloping the website for the hospital I work at (along with loads of help from Helpful Technology).

As part of the development we've been using Bootstrap 2.3 (due to needing to support IE7) and using the media class to display listing results.

image of the listing results

This makes it easier for the post thumbnail to float to the left and the copy to go to the right of it when we're listing the items out. However on mobile it doesn't work so well.

image of the listing on mobile

As you can see the issue lies with Bootstrap 2.3's way of collapsing the grid on mobile devices. What we are left with is the .media-object and .media-body sections being 100% wide and thus not floating anymore.

I have a cunning plan

I'm a big fan of Google Now, the card like interface works really well for me. It keeps the listings enclosed in their own little container which makes it easier to identify each item and the image makes a great hit area for the link.

With this in mind I had a play with turning the mobile version of the .media item into a card using only the default phone media query. Here's the end result.

image of the end result

How it's done

The trick here is using position: absolute; to turn the .media-object element into a background image for the .media item and then overlaying the .media-body content using position: relative;.

Here's the extra CSS that goes under the @media handheld, only screen and (max-width:767px) media query in the stylesheet:

.media{
    position: relative;
    box-shadow: 0 3px 5px #888;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    overflow: hidden;
    margin-bottom: 1em;
}

.media .pull-left{
    position: absolute;
    height: 100%;
}

.media .media-object{
    width: 100%;
    position: absolute;
    z-index: -999999;
    display: block;
    padding-bottom: 100%;
}

.media .media-body{
    position: relative;
    background-color: rgba(0,0,0,0.5);
    color: white;
    width: 100%;
    margin-top: 40%;
    padding: 6px;
    bottom: 0px;
    left: 0px;
}
.media .media-body a{
    color: white;
}

You can use the margin-top value of the .media .media-body to change how much of the background image is shown in the .media item.

Grab the code and tell me what you think

You can view a demo & grab the code on Github. It would be great to hear from you if you've found this useful or if you think mobile listings should be displayed in a different way. Let me know your thoughts via @colinwren.