where to put Media query in css file

Question

I want to ask that do we have to put Media query after the original css style?

if i put media query before original style, it does not work.

media screen and (max-width: 760px){
    #logo_bar img#logo_image {
        display: block;
        margin: 5px auto 0px auto;
        background-color: #c0c0c0;
        float: none;
    }

    #logo_bar form.search_wrapper{
        width: 65%;
        margin: 15px auto 0px auto;
        padding: 0px 0px 0px 0px;
        float: none;
    }
}

#logo_bar img#logo_image {
    width: 218px;
    height: 78px;
    margin-top: 33px;
    background-color: #c0c0c0;
    float: left;
}

#logo_bar form.search_wrapper{
    width: 55%;
    height: 30px;
    margin-top: 58px;
    float: right;
    padding: 0px 0px 0px 0px;
}

But, if i put media query after the original style, it works and change the sytle.

#logo_bar img#logo_image {
    width: 218px;
    height: 78px;
    margin-top: 33px;
    background-color: #c0c0c0;
    float: left;
}

#logo_bar form.search_wrapper{
    width: 55%;
    height: 30px;
    margin-top: 58px;
    float: right;
    padding: 0px 0px 0px 0px;
}

media screen and (max-width: 760px){
    #logo_bar img#logo_image {
        display: block;
        margin: 5px auto 0px auto;
        background-color: #c0c0c0;
        float: none;
    }

    #logo_bar form.search_wrapper{
        width: 65%;
        margin: 15px auto 0px auto;
        padding: 0px 0px 0px 0px;
        float: none;
    }
}

thats preference, Usually add them at the bottom - you could also import them in a separate file to keep things organized — Sergio Wizenfeld, Feb 25 '14 at 00:39
It is a bit strange though as in this case we might expect the specification in the media query to be more 'specific' than the regular styles... not sure why they made this decision to honor order first here. — Albert Xing, Feb 25 '14 at 00:59

score 5 · Accepted Answer · edited May 23 '17 at 11:50

Yes. CSS is cascading for a reason - it takes the latest and last style that you've specified in the file when it sees duplicate assignments.

Compare these two Fiddles: media query first vs. media query last. Resizing the window for the first example does not change the color of the div when it reaches 600px, while the second does adapt to the width.

Also note that there are priorities based on how specific the selector is - i.e. id selectors take higher precedence over class selector styles.

Finally, your media queries should start with an @ as is standard: e.g. @media screen and (max-width: 760px).

where to put Media query in css file

1 Answers1