How can I collapse the *sidebar first* region when the browser width is less than 900 pixels wide?

Question

How can I collapse the sidebar first region when the browser width is less than 900 pixels wide? Within the theme's .info file the following is set: settings[sidebar_first_width] = 4 How can I programatically change the above to 0 so that the sidebar first region does not take up any space within the page when the containing browser wide is less than 900 pixels wide? One possible approach is to utilize the media query at the bottom of the themes associated .css file so that the sidebar first region is collapsed when less than 900 pixels based on the following link: http://www.alistapart.com/articles/responsive-web-design/ but I am not sure if this is the best approach or what css to put in that would do this as an example from the above link: @media screen and (max-device-width: 480px) { .column { float: none; } }

John

Answer 1

A media query, just like the one you list, is indeed the proper way to do this.

1. Obviously you would first need to adjust the width from 480 to 900, but also, you may want to choose "max-width", instead of "max-device-width", as the former will work in a small browser window on a large screen as well. That's really up to you though.
2. You say that you want to collapse the sidebar, which means you may also want to "display: none;", instead of "float: none;".
3. Strictly speaking, the "screen and", is not necessary. If you want the rule to apply to all media types, such as print and handheld, you can just omit it.

Example 1, unfloat the sidebar, only on screen media:

@media screen and (max-width: 900px) {
  .sidebar-first {
    float: none;
  }
}

Example 2, hide the sidebar, all media:

@media (max-width: 900px) {
  .sidebar-first {
    display: none;
  }
}