'Trouble getting Conditional CSS with Media Query and Grails

I'm using media queries to import the correct stylesheet (mobile.css or main.css) in my Grails application.

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.

This is my code:

<!DOCTYPE html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><g:layoutTitle default="Baoole"/></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" /> 
    <link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
    <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
    <g:javascript library="application"/>   

<link rel="stylesheet" media = "screen and (min-width: 480px)" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" title = "main" >

<link rel="stylesheet"  media = "screen and (max-width: 480px)" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >
    
<g:layoutHead/>
    
        
<r:layoutResources />
<langs:selector langs="it, es, en, en_US, pt_BR, pt_PT, de, da, ru, ja, cs_CZ"/>
</head>

<body class="index">
some code...
</body>
</html>

If I reverse the order of <link> tags like:

<link rel="stylesheet"  media = "screen and (max-width: 480px)" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >

 <link rel="stylesheet" media = "screen and (min-width: 480px)" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" title = "main" >

I get the opposite behaviour than before. (works fine when I load from smartphone, no style when I load from PC).

In my main.css and mobile.css I have the same ids and classes

main.css

.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 < 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:"Trebuchet MS","Yanone Kaffeesatz","Agency FB";
    font-size: 14.5pt;
}

mobile.css

.index {
    background: black;
}

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:

<link rel="stylesheet" media = "screen and (min-width: 480px)"  href="${resource(dir: 'css', file: 'main.css')}" type="text/css" title = "main" >

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.

Now, adding a second stylesheet import (for mobile style):

<link rel="stylesheet"  media = "screen and (max-width: 480px)"  href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >

and so have:

<link rel="stylesheet" media = "screen and (min-width: 480px)"  href="${resource(dir: 'css', file: 'main.css')}" type="text/css" title = "main" >
    
<link rel="stylesheet"  media = "screen and (max-width: 480px)"  href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >

nothing changes. The page loaded from mobile still get no style added to it.

I already tried:

  1. This different media query syntax: media = "only screen and (max-device-width: 480px)"

  2. Media queries rules written directly in the stylesheet.

htmlcssgrailsmedia-queries


Solution 1:[1]

Instead of 

<link rel="stylesheet"  media = "screen and (max-width: 480px)" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >

Use Like this:

<link rel="stylesheet"  media = "only screen and (max-device-width: 480px)" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >

Solution 2:[2]

It might depend on the syntax used to import CSS, if you look at this example media rules loaded with stylesheet should look like <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Alternatively try to load media queries rules directly in the stylesheet, for mobile styles:

 @media screen and (max-width: 480px) {
    .index {
        /*all your prop*/
    }
}

and for main:

  @media screen and (min-width: 480px) {
    .index {
        /*all your prop*/
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rajesh
Solution 2

Related Questions