2

I'm trying to center the content of the header, if screen size decreases below 800 px.

So I defined a css media query, but it doesn't work properly. below is a fiddle with my code:

http://jsfiddle.net/QGyXe/3/

Note: I know there is a lot of code, but I'm trying to adjust the div#head_frame and its children, div#logo_container and div#main_buttons_container

What happens is, when I decrease the screen size, I see the new rules in Chrome's developer window, but the rules are overlined, I mean deactivated. I don't know why. Here is a screencap : enter image description here

I tried to reproduce the error with a simple dom, but it worked :

http://jsfiddle.net/a3yKk/1/

But I'm putting it here to show what I'm trying to achieve.

Thanks for any help.

jeff
  • 13,055
  • 29
  • 78
  • 136

1 Answers1

3

Your #main_buttons_container selector in your media query is less accurate than your div#main_buttons_container selector in your global CSS, so it is being overwritten. Change your CSS to:

@media screen and (max-width: 800px) {
  div#main_buttons_container {
    width: 100%;
  }
}
CodingIntrigue
  • 75,930
  • 30
  • 170
  • 176
  • wow. I didn't know it mattered. It solved the question, so you earned the tick. However, in the same time, I solved the problem in another way. I simply defined my global css as a media selector with min-width:801px. But since it is a global CSS, your solution makes more sense. Thanks ! – jeff Jul 25 '13 at 13:49
  • 1
    This is a really great article which explains CSS precedence better than I ever could: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ – CodingIntrigue Jul 25 '13 at 13:51