How do I change the order of elements and control flow in responsive css


Tags: css,responsive-design,skeleton-css-boilerplate

Problem :

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

Mobile and Desktop Layouts

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?



Solution :

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


    CSS Howto..

    CSS: How to refer to a tag

    Using CSS, how to modify a child element by its class without impacting another child element with the same class but slightly different parent

    How to Display text in Middle of table cell Horizontally and vertically in html css?

    How do browsers parse/render CSS?

    How to CSS border spacing (or) padding background image separately?

    How do you make a make a page's worth of empty space (with only a title) followed by a div in CSS?

    How to make css-menu independent of the number of menu items?

    How to add a border to only percentage of width of element, CSS Trick

    How to highlight a table row upon hover conditionally based on table cell values with CSS and jQuery?

    How to set columns 100% height within body using css

    How to apply custom styles to a jasper html report

    How Float divs like twitter?

    how to add css to selected row in treegrid GXT 3

    Responsive CSS background image - how to make content follow

    How to change iframe pages without the parent page changing with external links using CSS

    how to fit text inside a HTML div

    How to style this form using CSS?

    How to neaten css shapes?

    How can I have multiply a pixel width value with LESS Css?

    How to draw two non-concentric circles in CSS with numbers inside it?

    How to change order of table td for responsive?

    how to remove the last li::after for first line in specific width of an div

    How to view Google Maps in “print” mode?

    How to position ionic button using CSS

    How to make a div that appear on hover, stay while its hovered on in jquery or css

    How to set text area to maximum width in bootstrap

    how to replace a link name text

    How can i make each div look like seperate block?

    How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control

    How to get the type word inside the input field once after pressing the Comma key and not after pressing space bar