Как переопределить медиа-запрос в дочерней теме?

Question

Я хочу переопределить медиа-запрос в моей дочерней теме wordpress. В настоящее время он установлен в max-width: 1024px, но я хочу, чтобы он срабатывал гораздо меньше, скажем, 700 пикселей. Проблема в том, что если я установил новый медиа-запрос на 700 пикселей, да, будет активирован медиа-запрос 700px, но он не отменяет max-width: 1024px, этот код все еще подтверждается. Если бы я хотел переопределить максимальную ширину, превышающую 1024px, тогда проблем не было бы, но по мере того, как я уменьшаюсь, как я могу сказать, что игнорировать медиа-запрос 1024px в css родительской темы?

Я не хочу редактировать родительскую тему, поскольку я потеряю изменения в обновлениях. Посмотрели в других потоков, таких, как это:

Overriding media queries of parent css in wordpress child-theme

Но это не дает ответа на вопрос.

Answer 1

1. Скопируйте правила, установленные для @media (max-width: 1024px) в файл таблицы стилей.
2. Перепишите запрос СМИ к @media (min-width: 700px) and (max-width: 1024px)
3. Теперь использовать пользовательские правила @media (max-width: 700px) в детской style.css после переписанных стилей.

/* 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>