cannot get custom Omega stylesheets to load responsively I have an HTML5 Omega 3 subtheme. I'm using the responsive grids, and Omega's (Alpha's) -wide -normal etc. css files are working.

But I can't get mine to. I have read the handbook and the wiki to no avail.

In mytheme/css I have 

global.css
mytheme-alpha-default-normal.css
mytheme-alpha-default-wide.css


In my mytheme.info file I have

css[global.css][name] = my global stuff
css[global.css][description] = blah
css[global.css.less][options][weight] = 10

css[mytheme-alpha-default-normal.css][name] = my normal stuff
css[mytheme-alpha-default-normal.css][description] = blah
css[mytheme-alpha-default-normal.css][options][weight] = 10

css[mytheme-alpha-default-wide.css.less][name] = my wide stuff
css[mytheme-alpha-default-wide.css.less][description] = blah
css[mytheme-alpha-default-wide.css.less][options][weight] = 10


And I've enabled these in the Omega settings for the theme.

What happens is that all these stylesheets are loaded like the global one -- without any media query conditions at all, just like they were all global styles.

I've tried un-checking them. This just removes them. I've tried removing them from the .info file; this just removes them entirely too.

Can anyone help?
There's something odd about what you wrote in your question, because you mention *.less files. I'd expect to see just .css. Are they really .less?

But more importantly, you should not add css[] lines in the .info file for your width-specific css files. That makes them regular CSS files that will always be loaded. They will be listed in the list of CSS files, and can be turned on and off, as you see.

Take a look at the starter-theme .info file (e.g., starterkit_omega_html5.info), and you'll see that there are css[] lines there only for global.css, and not for any of the width-specific files.

Take those lines out. Omega will automatically generate loads for the width-specific files. It looks for the files based on the name pattern, and loads them with the appropriate media queries.

If the width-specific files do not appear at all in your page output with media queries, then there may be something wrong with your naming of the files. One common problem is that if your theme name has an underscore (e.g. "my_theme"), then the filenames must have dashes ("my-theme").

One other oddity to know is that the width-specific files for all the widths narrower than the browser width are loaded. So, for instance, if your browser is at "normal" width, the global, narrow, and normal width CSS files will all be loaded, in that order.

MORE:

Don't forget to check the box "Enable the responsive grid" in the theme settings, and also check the box "Use this layout with the responsive grid" for each width you want to include

You should see something like this in every page that's output:

....
@import url("http://yoursite.com/sites/all/themes/mytheme/css/global.css?lxt4yy");&lt;/style&gt;

&lt;!--[if (lt IE 9)&amp;(!IEMobile)]&gt;
&lt;style type="text/css" media="all"&gt;@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default-normal.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css?lxt4yy");&lt;/style&gt;
&lt;![endif]--&gt;

&lt;!--[if gte IE 9]&gt;&lt;!--&gt;
&lt;style type="text/css" media="all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)"&gt;@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default-narrow.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/omega/alpha/css/grid/alpha_default/narrow/alpha-default-narrow-12.css?lxt4yy");&lt;/style&gt;
&lt;!--&lt;![endif]--&gt;

&lt;!--[if gte IE 9]&gt;&lt;!--&gt;
&lt;style type="text/css" media="all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)"&gt;@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default-normal.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css?lxt4yy");&lt;/style&gt;

&lt;!--&lt;![endif]--&gt;

&lt;!--[if gte IE 9]&gt;&lt;!--&gt;
&lt;style type="text/css" media="all and (min-width: 1220px)"&gt;@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default-wide.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/omega/alpha/css/grid/alpha_default/wide/alpha-default-wide-12.css?lxt4yy");&lt;/style&gt;
&lt;!--&lt;![endif]--&gt;