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


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


Yes, it's using CSS Media Queries.

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


There is currently no discussion for this recipe.

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