How to override media query in child theme?

1 Views

I want to override a media query in my wordpress child theme. It’s currently set at max-width: 1024px, but I want it to trigger at far less, say 700px. The problem is if I set a new media query at 700px, yes the 700px media query is activated, but it does not override the max-width:1024px, this one is still being acknowledged. If i wanted to override with a max-width that’s larger than 1024px then there would be no problem, but as I’m going smaller, how do I tell it to ignore the 1024px media query in the parent theme’s css?

I don’t want to edit the parent theme as I’ll lose changes on updates. Have looked in other threads such as this:

Read More

Overriding media queries of parent css in wordpress child-theme

But it doesn’t answer the question.

Post Views: 1

Related posts

1 comment

    1. Copy the rules set for @media (max-width: 1024px) to the child stylesheet file.
    2. Rewrite the media query to @media (min-width: 700px) and (max-width: 1024px)
    3. Now use your custom rules @media (max-width: 700px) in child style.css after rewritten styles.
    /* Style.css rewritten */

@media (min-width: 700px) and (max-width: 1024px) {
  .color {
    color: lightblue;
    transform: translateY(50px);
  }
}
/* Child.css */

@media (max-width: 700px) {
  .color {
    color: red;
  }
}
    <div class="color">I can change my color and position only after 700px and before 1024px</div>

Comments are closed.