Search code examples
htmlcssmedia-queries

How to properly override the style defined for the media query before the current one?

This is a header for small devices:

enter image description here

and this is the CSS:

body{
    margin: 0; 
    padding: 0;
    background-color: #EEEEEE;
    color: #393939;
    font-family: 'Molengo','Verdana','Georgia','Times New Roman',serif;

}

a, a:visited {
    color: #F03366;
    text-decoration: none;
}
#div-header{
    height: 3.1em;
    background-color: #393939;
    box-shadow: 0 4px 4px #CCCCCC;
    padding: 10px ;
}

#div-header h1 {
    display: inline-block;
    float: left;
    font-size: 1.4em;
}

#div-header h1 a, #div-header h1 a:visited {
    color: #DDDDDD;
    font-weight: bold;
    text-decoration: none;
}

#div-header .links{
    text-align: right;
    margin-top: 4.5em;
}

#div-header .links li {
    display: inline-block;
}

#div-header .links li a {
    font-size: 1.3em;
}

http://jsfiddle.net/xnh2E/

this is the header for larger screens:

enter image description here

and this is the code:

@media (min-width: 1200px) { 
    #div-header{
        height: 3.1em;
        background-color: #393939;
        box-shadow: 0 4px 4px #CCCCCC;
        padding: 10px 30px;
    }

    #div-header h1 {
        display: inline-block;
        float: left;
        font-size: 2em;
    }

    #div-header h1 a, #div-header h1 a:visited {
        color: #DDDDDD;
        font-weight: bold;
        text-decoration: none;
    }

    #div-header .links {
        display: inline-block;
        float: right;
        /*padding-top: 1em; */
        position: relative;
        margin: 0;
        text-align: left;
    }

    #div-header .links li {
        display: inline;
        padding: 0 7px;
    }

    #div-header .links li a {
        font-size: 1.3em;
    }
}

http://jsfiddle.net/f8pzX/

The most important portion of code that differs between both pages, is the one for the .links class.

base css

#div-header .links{
    text-align: right;
    margin-top: 4.5em;
}

css for big screens

#div-header .links {
    display: inline-block;
    float: right;
    position: relative;
}

Now, I used media query to make a responsive design.

Here you can find the code:

http://jsfiddle.net/5v8YE/

The first problem is that the css for big screens inherits some attributes of the base css, like the text-align and the margin top.

So I rewrite the style this way:

#div-header .links {
    display: inline-block;
    float: right;
    position: relative;
    margin: 0;
    text-align: left;
}

But now the header looks like this:

enter image description here

If I add this line: 

padding-top: 1em;

the header looks fine again, but Do you know why the re written code is not working even when I restored it to the default values for the big screen?

Besides, is there a way to tell a media query to complety overwrite the style defined in the media query before the current one?

I hope I explained myself clearly. I appreciate any help.

Thanks in advance.

Solution

  • You're resetting the margin within the CSS for big screens. Take that line out and the rest should work.

    #div-header .links {
    display: inline-block;
    float: right;
    position: relative;
    text-align: left;
}

    The cascading nature of CSS means that you can't just clear an existing set of styles, they need to be overwritten. So you maintain the styles you need and overwrite the ones to make a page responsive.