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; } }


1 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;
  • Letharion, I really appreciate you response to my question and I ended up using your: Example 2, hide the sidebar, all media: @media (max-width: 900px) { .sidebar-first { display: none; } } Commented Jan 4, 2012 at 19:01
  • I'm glad I could help. :) If you want to wait for other answers, that's of course reasonable, but if you feel that the question is answered well enough, please also accept my answer. :)
    – Letharion
    Commented Jan 4, 2012 at 19:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.