ElectricFeet on "[Theme: Customizr] Responsive sidebars"

@brooke_babington: Although what you have will work on many devices, it may give you unintended results on several. For example, what do you want the browser to do if your screen is 570px wide?

A few other points:

• You can choose any breakpoints with media queries. However, it's best if you stick to the Customizr breakpoints, so that the screen doesn't jump around too many times. Those breakpoints are:
  

  @media (min-width: 1200px) {}
  @media (max-width: 1200px) {}
  @media (min-width: 980px) {}
  @media (max-width: 979px) {}
  @media (min-width: 768px) and (max-width: 979px) {}
  @media (max-width: 767px) {}
  @media (min-width: 481px) and (max-width: 767px) {}
  @media (max-width: 480px) {}
  @media (max-width: 320px) {}

  (min-width: 481px) and (max-width: 767px) is specified in Customizr code as (min-width: 480px)..., but I changed it to 481px so as not to conflict with (max-width: 480px). If you have a max-width: 480px rule and a min-width: 480px rule, then I think the last one will take precedence. So for flexibility in re-arranging your CSS file, it's best to make them mutually-exclusive.

• Specifying 2 identical rules, with one for landscape and one for portrait is the same as having one rule without specifying the orientation— which you already have.
• There's also other duplication in there. (min-width:240px) and (max-width:320px) is already covered by (max-width:320px).
• The max-device-width vs max-width is an interesting one. The max-device-width is the maximum width that the device can display. Whereas the max-width is the maximum that the browser is currently showing.

  You're using them intelligently by removing your sidebars at 1024px on devices that cannot go beyond 1024px, but showing them on browsers currently at 1024px, but which could conceivably be stretched wider. However, don't overestimate the ability of users to stretch windows. The first person I tested my site with didn't know she could stretch the browser window (someone with a degree and an average understanding of technology)). Note also that some people work with reduced-width browser windows by choice. For example, my screen is 2560px wide, but unless I'm testing screen widths, I generally keep my browser window around 1000-1200px wide.

  So you may want to consider what you want to do in these cases—use max-device-width or max-width. I stick to max-width everywhere (and don't use max-device-width) because I want to be in control of what people are actually seeing, not what they could conceivably see if they were to stretch their browser window.

All in all, it looks like what you are trying to achieve is covered by two rules:

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	#right.widget-area,
	#left.widget-area {
		display: none !important;
	}
}
@media screen and (max-width: 767px) {
	#right.widget-area,
	#left.widget-area {
		display: none !important;
	}
}

And if you decide not to use max-device-width, you could bring it down to just one rule.