title: Trouble getting Conditional CSS with Media Query and Grails
body: <p>I'm using media queries to import the correct stylesheet (mobile.css or main.css) in my Grails application.</p>
  <p>If I load the page with my PC, it works fine, when i load the page with my Android smartphone, I get a page without style added to it.</p>
  <p>This is my code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
  
      &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;
      &lt;title&gt;&lt;g:layoutTitle default=&quot;Baoole&quot;/&gt;&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;shortcut icon&quot; href=&quot;${createLinkTo(dir:'images',file:'favicon.ico')}&quot; type=&quot;image/x-icon&quot; /&gt; 
      &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;${resource(dir: 'images', file: 'apple-touch-icon.png')}&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;114x114&quot; href=&quot;${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}&quot;&gt;
      &lt;g:javascript library=&quot;application&quot;/&gt;   
  
  &lt;link rel=&quot;stylesheet&quot; media = &quot;screen and (min-width: 480px)&quot; href=&quot;${resource(dir: 'css', file: 'main.css')}&quot; type=&quot;text/css&quot; title = &quot;main&quot; &gt;
  
  &lt;link rel=&quot;stylesheet&quot;  media = &quot;screen and (max-width: 480px)&quot; href=&quot;${resource(dir: 'css', file: 'mobile.css')}&quot; type=&quot;text/css&quot; title = &quot;mobile&quot; &gt;
      
  &lt;g:layoutHead/&gt;
      
          
  &lt;r:layoutResources /&gt;
  &lt;langs:selector langs=&quot;it, es, en, en_US, pt_BR, pt_PT, de, da, ru, ja, cs_CZ&quot;/&gt;
  &lt;/head&gt;
  
  &lt;body class=&quot;index&quot;&gt;
  some code...
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>If I reverse the order of <code>&lt;link&gt;</code> tags like:</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot;  media = &quot;screen and (max-width: 480px)&quot; href=&quot;${resource(dir: 'css', file: 'mobile.css')}&quot; type=&quot;text/css&quot; title = &quot;mobile&quot; &gt;
  
   &lt;link rel=&quot;stylesheet&quot; media = &quot;screen and (min-width: 480px)&quot; href=&quot;${resource(dir: 'css', file: 'main.css')}&quot; type=&quot;text/css&quot; title = &quot;main&quot; &gt;
  </code></pre>
  <p>I get the opposite behaviour than before. (works fine when I load from smartphone, no style when I load from PC).</p>
  <p>In my main.css and mobile.css I have the same ids and classes</p>
  <p>main.css</p>
  <pre class="lang-css prettyprint-override"><code>.index {
      background-image: url(../images/stadiodue.jpg);
      background-repeat: no-repeat;
      color: white;
      margin: 0 auto;
      max-width: 1350px;
      overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport &lt; 960px wide */
      -moz-box-shadow: 0 0 0.3em #255b17;
      -webkit-box-shadow: 0 0 0.3em #255b17;
      box-shadow: 0 0 0.3em #255b17;
      font-family:&quot;Trebuchet MS&quot;,&quot;Yanone Kaffeesatz&quot;,&quot;Agency FB&quot;;
      font-size: 14.5pt;
  }    
  </code></pre>
  <p>mobile.css</p>
  <pre class="lang-css prettyprint-override"><code>.index {
      background: black;
  }
  </code></pre>
  <p>I think the problem is not the incorrect syntax of media query. If I remove the import of the mobile.css stylesheet and only have:</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot; media = &quot;screen and (min-width: 480px)&quot;  href=&quot;${resource(dir: 'css', file: 'main.css')}&quot; type=&quot;text/css&quot; title = &quot;main&quot; &gt;
  </code></pre>
  <p>in my code, the application respond with correct behaviour: loading the page from PC I get main.css style, loading the page from smartphone I don't get any style.</p>
  <p>Now, adding a second stylesheet import (for mobile style):</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot;  media = &quot;screen and (max-width: 480px)&quot;  href=&quot;${resource(dir: 'css', file: 'mobile.css')}&quot; type=&quot;text/css&quot; title = &quot;mobile&quot; &gt;
  </code></pre>
  <p>and so have:</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot; media = &quot;screen and (min-width: 480px)&quot;  href=&quot;${resource(dir: 'css', file: 'main.css')}&quot; type=&quot;text/css&quot; title = &quot;main&quot; &gt;
      
  &lt;link rel=&quot;stylesheet&quot;  media = &quot;screen and (max-width: 480px)&quot;  href=&quot;${resource(dir: 'css', file: 'mobile.css')}&quot; type=&quot;text/css&quot; title = &quot;mobile&quot; &gt;
      
  </code></pre>
  <p><strong>nothing</strong> changes. The page loaded from mobile still get no style added to it.</p>
  <p><em><strong>I already tried:</strong></em></p>
  <ol>
  <li><p>This different media query syntax:
  media = &quot;only screen and (max-device-width: 480px)&quot;</p>
  </li>
  <li><p>Media queries rules written directly in the stylesheet.</p>
  </li>
  </ol>