Question

I’m using skeleton and here is the responsive layout that I want:

mobile layout – Title, Image, Description all in one column stack

desktop layout – The title and description to the right of the image

How should I structure the html and css so that the responsive layout can change from one to the other using css and media queries only? I tried floating the image to the left in the desktop layout and making the title a block element in the mobile layout:

<div class="container">
<span class="date">10/1/2012</span>
<span class="title">title</span>
<img class="thumbnail" src="http://www.placehold.it/300x200">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisl urna, posuere et tincidunt id, malesuada id libero. Sed vel neque tellus. Nulla et justo eu sapien accumsan eleifend eget id enim. Suspendisse sagittis, erat in mattis sagittis, dolor leo molestie nisi, eget cursus massa est at erat.
</p>
</div>​​​​​​​​​​​​​​

Mobile CSS

.title {
     display:block;
}

​.thumbnail {
}

.conatainer {
 width:320px;
}

Desktop CSS

​.title {
     position:relative;
}

​.thumbnail {
    float:left;
}

.conatainer {
 width:960px;
}

This seems to work for the most part except the description wraps below the photo surrounding it on the bottom of the photo if the text is long enough, instead of just keeping to the right column.

How should I do this if I am using skeleton or one of the responive grid systems, should I be using their column classes?

Answer 1

You could set float: left also on .description paragraph on desktop.css stylesheet. This will make expand your paragraph in its own “column”.

Then, remember to also apply a clearing to .container element