I have a WordPress theme that I created, but for some reason in my template header, some of the styles I have declared are being overridden somehow. When I inspect in Chrome some of those elements are not listed as if they are not in my style.css, but they are.

I can't figure this out for anything. For example, there are some elements that should be set to display:none in desktop mode, but they are still showing. My footer styles in style.css are not getting applied. I have tried using Chrome to see what is going on, and I've tried setting some declarations to !important, but that doesn't even work.

Any help would be greatly appreciated!

section.page-area { position:relative; top:0px; margin:0px; margin-left:auto; margin-right:auto; width:60%!important; margin-bottom:50px; }

.mobile-nav-container, nav-menu, button.open-menu, button.open-menu-small, .home-btn-mobile, #main-logo-mobile, #mobile-logo, .cover-current-mobile { display:none!important; }

This is just a tiny snippet of CSS that is not getting applied.

  • My style.css file is quite large now, so I'm not sure if that is the problem, where it is taking a long time to load the rest of the styles? There are about 8k lines of CSS that I tried to combine to cut down HTTP requests for the individual styles. Oct 7, 2014 at 18:04
  • have you minified the css? 8k lines seems a little much too. You may be running into blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
    – Fraggy
    Oct 7, 2014 at 20:54

1 Answer 1


Sometimes its when you haven't ended a piece of CSS off properly everything below it is ignored. Try moving the code up the CSS style sheet to see if this the issue. If it is then finding it can be a bit tricky..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.