Overriding media queries of parent css in wordpres

Question

I want to create a child-theme of a responsive wordpress-theme. The parent theme's css defines somes media queries like:

@media screen and (max-width: 1000px) { /* a bunch of changes */ }

Now let's say I would like the breakpoint to be at 900px instead of 1000px. Is there any way to easily override this in my child-theme's css?

Answer 1

JoshC is absolutely correct.

Probably you do not understand the idea - media query is nost some kind of rule like in css. This is more glogal understanding.

Let's say:

you have media query in main theme

@media screen and (max-width: 1000px) { #main{color:#000;} }

You set div with ID main to have text color BLACK but only if maximum browser width is not more then 1000px - (max-width: 1000px)

Wherever you use this query - it will work same way.

What you need to specify is the stuff inside, for example to make the following more important use:

@media screen and (max-width: 1000px) { #main{color:#000 !important;} }