Wordpress - media query not being recognized in CSS

Question

I am using a child theme (of twentyfourteen) and am trying to remove the padding of a particular element. The code in-question appears as such in the parent style.css:

@media screen and (min-width: 846px) { .content-area, .content-sidebar { padding-top: 72px; } }

When modify the padding to 0px thusly:

@media screen and (min-width: 846px) { .content-area, .content-sidebar { padding-top: 0px; } } and insert at the end of the PARENT style.css, I achieve my desired results (padding changes to 0px). However when I insert the identical code at the end of the CHILD style.css, it does nothing (the padding remains at 72px). Anyone know why this happening?

Answer 1

CSS rules are parsed in order, with the rules at the end taking precedence over the rules at the beginning. In other words, if the same selector appears twice (even in different files), the second copy will overwrite the first. If your custom CSS is loaded before the theme's CSS, the theme CSS will take precedence. You can see this happening if you use the inspector (F12 in Chrome) to see which copy of the selector the browser is actually referencing.

CSS also respects specificity moreso than order, so you can also try making your selector more specific than the theme's. For example, imagine .content-area and .content-sidebar are inside a wrapper called .content-wrapper. If you do something like this, it will override the original selector:

.content-wrapper .content-area, 
.content-wrapper .content-sidebar {
  padding-top: 0px;
}