Применяется только один медиазапрос - PullRequest
Новая
       8

Применяется только один медиазапрос

0 голосов
/ 10 января 2019

Итак, у меня есть дочерняя тема, которую я пытаюсь сделать адаптивной, но один из медиазапросов не будет применяться вообще - тот, который изменяет цвет фона .single-column на оранжевый, когда экран становится меньше. чем 700px. Два других медиазапроса работают отлично. У кого-нибудь есть идеи относительно того, почему этот один медиа-запрос не работает и как я могу это исправить?

Это дочерняя тема, и у родительской темы были медиазапросы для следующих размеров экрана: 2500px, 1300px, 1100px, 1000px. Мой код ничего не отменяет, но мне любопытно, связано ли это с моей проблемой, поскольку размер экрана, с которым у меня возникают проблемы, отсутствует в наборе медиазапросов родительской темы. 

 /* 1100px */
 @media screen and (max-width: 1100px) {
    .mostrecent > ul {
      background-color: blue;
    }
 }

 /* 1000px */
 @media only screen and (max-width: 1000px) {
    .single_column {
      display: flex;
      flex-direction: column;
 }

 .right_column70 {
    order: 1;
    width: 100%;
 }

 .left_column30 {
    order: 2;
    display: flex;
    width: 100%;
 }

 .mostrecent > ul {
    display: flex;
 }
}

/* 700px 
This one doesn't work */
@media only screen and (max-width: 700px) {
    .single_column {
     background-color: red;
 }
}

1 Ответ

0 голосов
/ 10 января 2019

Чаще всего в основной таблице стилей темы есть правило CSS для .single_column, использующее селектор с более высокой спецификацией CSS (вы можете посмотреть Google для получения дополнительной информации). В этом случае правило медиа-запроса не будет перезаписывать его из-за его более низкой специфики.

Вы должны проверить этот элемент .single_column, используя инструменты браузера, чтобы увидеть, какое правило CSS применяется к нему.

Если, например, у этого правила есть селектор, такой как main .container-1 div.wrapper > products .single_column, вам нужно использовать тот же селектор (или даже более конкретный / сложный) для вашего собственного правила CSS в этом медиазапросе.

...