struggling to override @media min-width css rules under wordpress

3 Views

I am attempting to override a @media (min-width:#) rule with css code included in the head of my document.

The CSS rule being invoked from the external stylesheet is

Read More
    @media (min-width: 1200px)
       .span9 {
              width: 870px;
              }

so why does inserting 

    <style type="text/css">

    @media (min-width: 1200px)
       .span9 {
              width: 1100px;
              }
    </style>

into the head of my document not do anything at all? when I live adjust the rule in chrome element inspector it works just as you would imagine.

I understand that subsequent (smaller) @media (min-width:#) rules can take precedence if they are processed last but shouldn’t this include in the very bottom of the page head be the final thing processed?

I would really appreciate any advice as Ive been messing and reading about this for hours and I can’t make any headway. Thanks kindly for your time. 🙂

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. Silly possibility – have you tried adding brackets to your media query?

    <style type="text/css">

    @media (min-width: 1200px){
       .span9 {
          width: 1100px !important;
        }
    }
</style>

  2. Try putting !important into your css property so ordering precedence is not the case:

    <style type="text/css">

    @media (min-width: 1200px)
       .span9 {
              width: 1100px !important;
              }
</style>

    I haven’t try it though.