Why are all media queries interfering with eachother in wordpress and how to solve

0 Views

I am very frustrated with media queries. I use wordpress and if I fill them in my css one media query after the other.. they keep on interfering eachother.

If I put this:

Read More
@media (max-width: 481px) {
    .content {
        width: 100%;
        left: 0;
        top: 100px;
    }

    #sidebar {
        background: url(http://openmindedlifepath.com/wp-content/uploads/2013/10/wood.png);
    }

    #cssmenu {
        left: 0;
    }

    #logo {
        top: 0;
    }

    #header {
        padding: 38px;
    }

    #container {
        top: 0;
        right: 0;
    }
}

@media (max-width: 1023px) {
    .content {
        bottom: 0;
        width: 100%;
        left: 0;
        top: 20px;
    }

    #sidebar {
        background: url(http://openmindedlifepath.com/wp-content/uploads/2013/10/wood.png);
    }

    #cssmenu {
        left: 0;
    }

    #logo {
        top: 0;
    }

    #header {
        padding: 35px;
    }
}

I only get one style (the one of the last media query…)

I could really need some help with this.. not understanding why its not working. I tried to call extern css sheets for each media query but I did not succeed calling the stylesheet in the header.php!! Not sure I like this wordpress… Need somebody to help me!

Post Views: 0

Related posts

Leave a Reply

2 comments

  1. Technically the max-width: 1023px condition is met on 481 pixels width (it is MAX width) and that’s why it overwrites the styles. Just place the width queries from highest to lowest.
    For example:

    @media screen and (max-width: 1024px) {
    // Something
}

@media screen and (max-width: 481px) {
   // Something else to overwrite the above
}

  2. If your using W3 Total Cache check your minify and CDN settings. The results of using this normally reliable plugin can be unexpected. I usually leave the minify settings unchecked since the gains are minimal.