Задать вопрос
@Denis_DM
media-queries

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

Сайт под управлением 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;
}
}


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

скрины

5bbf0ed82366e171421912.png
5bbf0ee197850055878608.png
  • Вопрос задан
  • 2399 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
@NotFair
web-developer 
<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;
}
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@futior
Вероятнее всего стили из файла temaplate.css подключаются раньше чем те, что перекрывают. Тут либо увеличить вес селектора, либо поменять последовательность подключения стилей.
Ответ написан
Комментировать
Комментировать
delphinpro
@delphinpro
frontend developer
Правило перекрывается более приоритетным селектором

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

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

Есть еще 4 варик — исправить непосредственно чужой стиль.
Ответ написан
Комментировать
Комментировать
@Denis_DM Автор вопроса
Примечание в теге head прописал
<meta name="viewport" content="width=device-width, initial-scale=1">
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Таргетолог
KRAFFIK
До 15 000 ₽
Системный аналитик
Uplab
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настройка шаблона
19 апр. 2024, в 15:01
35000 руб./за проект
Разработать телеграмм бота для анонимных сообщений
19 апр. 2024, в 14:53
30000 руб./за проект
Разработать парсер и админку
19 апр. 2024, в 14:12
30000 руб./за проект
Ещё заказы