CODEWITHSUNDEEP
css
user852091
user852091

Reputation: 3090

CSS: Hide a column when the width decreases

Check out: http://thinkvitamin.com/

As you decrease the browser size, at some point the right column simply disappears. Pretty nice downgrading, and this makes for quite a flexible design. I do not see, however, any special CSS going on. Is this Javascript, or can this somehow be achieved with CSS only?

Upvotes: 6

Views: 2399

Answers (2)

thirtydot
thirtydot

Reputation: 228182

This is being done with pure CSS, namely with CSS3's Media Queries.

The spec: http://www.w3.org/TR/css3-mediaqueries/

A tutorial: http://webdesignerwall.com/tutorials/css3-media-queries

Browser support: http://caniuse.com/css-mediaqueries (works "everywhere" except IE8 and lower)

Upvotes: 9

Variant
Variant

Reputation: 17365

The reason that the sections on the right disappear is because they have this on their css:

width: 24%;
float: right;

if the width would have been set to a fixed width the sections would have dropped to the bottom of the article.

Upvotes: 0

Related Questions