Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Multiple instances of a media query in css doesn’t work?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 22, 2013 at 6:32 pm #42182
    andrews
    Participant

    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 #121950
    rosspenman
    Participant

    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 #121956
    andrews
    Participant

    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 #121958
    rosspenman
    Participant

    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 #121960
    Musama
    Member

    remove the only expression & try again

    January 22, 2013 at 9:36 pm #121967
    andrews
    Participant

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

    January 23, 2013 at 7:14 am #122005
    Paulie_D
    Member

    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.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.