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");</style>
<!--[if (lt IE 9)&(!IEMobile)]>
<style type="text/css" media="all">@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");</style>
<![endif]-->
<!--[if gte IE 9]><!-->
<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)">@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");</style>
<!--<![endif]-->
<!--[if gte IE 9]><!-->
<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)">@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");</style>
<!--<![endif]-->
<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 1220px)">@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");</style>
<!--<![endif]-->