Grow your CSS skills. Land your dream job.

Multiple instances of a media query in css doesn’t work?

  • # January 22, 2013 at 6:32 pm

    I was trying to improve my workflow for responsive design by experimenting with writing multiple media queries wherever I needed them instead of the normal way (having to scroll to the bottom of my stylesheet to add some css into a single area for a media query).

    I haven’t been able to find anything written about this (nor am I sure if this will effect speed) – however Firefox was rendering my build perfectly (and Opera on Win) but every other browser seems to have issues doing this.

    Has anyone got any ideas on why this sort of thing wouldn’t work? Or has also tried this? I just don’t think having to separate my responsive css for an element to another section of my stylesheet is a workable solution. I like having all css for a particular element all together so I can look in one place per element to see exactly what styles are being applied.

    Example (I want to be able to structure my css like this) -

    #nav_main ul {
    width: 100%;
    }

    @media only screen and (min-width : 768px) {
    #nav_main ul {
    display: table;
    text-align: center;
    }
    }

    #nav_main > ul > li {
    display: block;
    margin-bottom: 5px;
    position: relative;
    }

    @media only screen and (min-width : 768px) {
    #nav_main > ul > li {
    display: table-cell;
    margin-bottom: 0;
    padding-right: 5px;
    }
    }

    Example -

    <!DOCTYPE html>
    <html class="no-js" lang="en">

    <head>
    <meta charset="utf-8" />

    <title>Multiple Instances of Media Queries Don't Work in Anything but Firefox?</title>

    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
    </head>

    <body>

    <div>
    <p>Testing 1 2 3</p>
    </div>

    </body>
    Check out this Pen!

    # January 22, 2013 at 6:51 pm

    I don’t see a problem with the code, and it works for me in the WebKit nightly, Chrome Canary and Firefox, but doesn’t work in Opera. I’m using a Mac, but that shouldn’t make a difference…

    # January 22, 2013 at 8:29 pm

    There’s nothing wrong with the code – it’s merely a simplified example of using multiple instances of the same media query within the same stylesheet – of which I’ve found Firefox (win) and Opera (win) are the only browsers that render correctly.

    # January 22, 2013 at 8:32 pm

    What’s it supposed to look like? It works the same across all browsers I’ve looked at.

    # January 22, 2013 at 8:35 pm

    remove the only expression & try again

    # January 22, 2013 at 9:36 pm

    Changed instances “@media only screen” to “@media only” ..still no luck.

    # January 23, 2013 at 12:20 am

    Has to be something lame, the code above works for me on PC with IE, FF and Chrome.

    You probably already know, but why not use a mixin to accomplish this and make the MQ’s a little easier to write. I am currently using [this mixin/method](http://codepen.io/scottnix/details/wFqrz#pen-details-tab “”).

    I am at the point though where I feel like I am better off leaving the media query blocks at the bottom (which is really a separate SCSS file using @import), makes it so much easier for me to keep track of them. I keep hearing people doing it with the original block of code, but I find the code seems convoluted, still tinkering with it though, maybe there is something I am missing.

    # January 23, 2013 at 7:14 am

    Codepen example is working for me in Chrome/FF/IE10.

    I’m guessing there is something else wrong with your development site code if that’s not working.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".