CODEWITHSUNDEEP
javascriptjqueryhtmlcss
gruber
gruber

Reputation: 29749

Change columns number based on the window size

Is it possible to change the layout using CSS only, so when windows size < x then I have the text on one column with width of 100% and when window >= x then make it two columns with each width set to 50%?

For example:

one column:

first part of the example text
second part of the example text

two columns:

first part of the                 second part of the
example text                       example text

Upvotes: 0

Views: 3043

Answers (3)

Htmllancer
Htmllancer

Reputation: 21

At first you can use CSS3 column-count: property.
And adding column class with the help of JavaScript at your special screen width condition.

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47657

Try it with media queries - DEMO

div {
    border: 1px solid #c00;
}

@media only screen and (min-width: 481px) {
    div { 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        float: left;
        width: 50%; 
    }
}​

Upvotes: 6

george_r
george_r

Reputation: 76

You can do this with media queries, which will deliver different stylesheets depending on the screen size.

HTML:

<div class="col1">Lorem ipsum  ... interdum mi.</div>
<div class='col2'>Integer varius,  ... sagittis dolor.</div>​

CSS:

@media (max-width: 500px) {
    .col1, .col2 { width: 45%; float: left}
}

http://jsfiddle.net/FKSkv/1/

Upvotes: 0

Related Questions