How to set up CSS media queries correctly?

Question

Media queries

Site running joomla 3. In the head tag I wrote:

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

Started connecting media queries. Example below:

@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;
}
}

But they do not work when I look at the code in the browser, I see all my written properties crossed out. What could be the problem? I read on the Internet that the problem may be in this "The rule is overridden by a higher priority selector" if so, how to fix it. I will be extremely grateful for the detailed answer.

screenshots

Answer 1

<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

Most likely, the styles from the temaplate.css file are included before those that overlap. Here, either increase the weight of the selector, or change the sequence of connecting styles.

Answer 3

The rule is overridden by a higher priority selector

That's right.
The selector is the same. But one (yours) is located in an external file, the second is embedded in the page through the style tag. With the same specificity of selectors, priority is given to those embedded in the page (a cascade is triggered).
There are three ways
out 1. Place your styles in the body of the page after others.
2. Move other people's styles to an external file that is connected before yours.
3. Increase the specificity of your selector. This is the simplest method. The simplest thing is to add !important to your rules. Or include some other class/tag in your chain of selectors.
There are 4 more variaks - fix someone else's style directly.

Answer 4

Note in the head tag registered

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