Responsive CSS: Replicating how Facebook's chat panel disappears below a certain browser window width

Problem

Notice how facebook's right hand, ~200px-wide, chat panel/column disappears when you shrink your window below a certain width. (It then switches to a pull-out menu at the bottom)

I presume this is some sort of responsive CSS - can anyone offer any guidance on how I can achieve a similar effect with a similar right-hand panel on my own site?

Problem courtesy of: christian

Solution

Yes, it's using CSS Media Queries.

<style>
@media (min-width: 701px) {
  //css for wide screen
}
@media (max-width: 700px) {
  //css for narrow screen
}
</style>
Solution courtesy of: mb21

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.