Using Child theme to override @media max-width

  • Resolved argh

    (@r0dman)


    10 years ago

    My theme uses the following code:

    @media only screen and (max-width: 780px) {
	ul.sub-menu {
		position: relative;
		left: 0;
		display: block;
		width: 100%;
	}

	ul.sub-menu li{
		border-bottom: 0px solid #fff;
	}

	ul.sub-menu li:last-child{
		border-bottom: 0px solid #fff;
	}
}

    I want to change this to:

    @media only screen and (max-width: 992px) {
	ul.sub-menu {
		position: relative;
		left: 0;
		display: block;
		width: 100%;
	}

	ul.sub-menu li{
		border-bottom: 0px solid #fff;
	}

	ul.sub-menu li:last-child{
		border-bottom: 0px solid #fff;
	}
}

    How can I do this using the child theme? It seems to me that because it is not a direct match with the @media line, WordPress won’t recognize it.

    Any help is appreciated

Viewing 3 replies - 1 through 3 (of 3 total)
  • CrouchingBruin

    (@crouchingbruin)

    It should work fine. Since your media query in your child theme will come after the parent theme’s media query, your media query will override the parent theme’s media query even when the browser goes under 780px. Now, if your new media query were to somehow come before the parent theme’s query, then your CSS would be in effect between 780px and 992px, and then the original rule would take over under 780px.

    So the way it works is that if two CSS rules have identical selectors, and the media query parameters are valid, the one which comes last takes precedence over the one that comes earlier. So at 992px, your CSS will come into effect. At 780px, your rule and the parent rule are both valid with regards to the media query screen widths, but since your CSS comes later, your rule will take precedence.

    Thread Starter argh

    (@r0dman)

    Thanks CrouchingBruin. It worked however I did need to use !important.

    CrouchingBruin

    (@crouchingbruin)

    You shouldn’t have needed to use the !important clause in this situation, just using the same selectors should have been fine. In fact, you should avoid using the !important clause unless it is absolutely necessary; it can make later CSS overrides more complicated. The only time you really need to use it is to override a previous rule which includes it, or to override an inline style. If you want to share a link to your site, I can take a look and see why your CSS isn’t overriding a rule that you think it should be overriding.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using Child theme to override @media max-width’ is closed to new replies.