Как правильно настроить CSS медиа запросы?

Question

[Denis_DM]

Сайт под управлением joomla 3. В теге head прописал:

<meta name="viewport" content="width=device-width, initial-scale=1">

Начал подключать медиа запросы. Пример ниже:

@media (min-width: 992px) and (max-width: 1360px) {
  #sppb-addon-1538044483154 .sppb-addon-title {
    font-size: 20px;
}
  #sppb-addon-1538051252651 .sppb-addon-title {
 font-size: 20px;
}
  #sppb-addon-1538051252656 .sppb-addon-title {
 font-size: 20px;
}
}

Но они не срабатывают, когда смотрю в браузере код, вижу все свои написанные свойства перечеркнутыми. В чём может быть проблема? Прочитал в интернете что проблема может быть в этом "Правило перекрывается более приоритетным селектором" если это так, как это исправить. буду чрезмерно благодарен за подробный ответ.

скрины

Answer 1

[Pavlo Marchenko]

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

media screen and (max-width: 1200px) {
.container {
width: 970px;
}
}

media screen and (max-width: 991px) {
.container {
width: 750px;
}
}

media screen and (max-width: 767px) {
.container {
width: 450px;
}

}

media screen and (max-width: 479px) {
.container {
width: 310px;
}
}

Answer 2

[Виктор]

Вероятнее всего стили из файла temaplate.css подключаются раньше чем те, что перекрывают. Тут либо увеличить вес селектора, либо поменять последовательность подключения стилей.

Answer 3

[Сергей delphinpro]

Правило перекрывается более приоритетным селектором

Всё верно.
Селектор один и тот же. Но один (ваш) расположен во внешнем файле, второй встроен в страницу через тег style. При одинаковой специфичности селекторов приоритет отдается встроенному в страницу (срабатывает каскад).

Выхода три
1. Поместить свои стили в теле страницы после чужих.
2. Вынести чужие стили во внешний файл, подключаемый перед вашим.
3. Увеличить специфичность своего селектора. Это наиболее простой метод. Самое-самое простое — добавить !important своим правилам. Или включить еще какой-то класс/тег в свою цепочку селекторов.

Есть еще 4 варик — исправить непосредственно чужой стиль.

Answer 4

[Denis_DM]

Примечание в теге head прописал

<meta name="viewport" content="width=device-width, initial-scale=1">