Почему @media не работает?

Question

[DaniilPo]

@media only screen and (min-width: 1450px) {
	.OrderButton{
		left: 40%;
		width: 10%;
		border: 1rem solid white;
		font-size: 143.4%;
	}
}

Почему может не работать ?
Сайт на WordPress если это важно

Comments

[Антон Литвиненко]

все у вас работает, просто чемто перебивается, что мы на скрине не видим

Answer 1

[Сергей delphinpro]

Так кнопка будет красная:

.Button { color: green; }
@media only screen and (min-width: 1450px) {
  .Button { color: red; }
}

А так – зеленая:

@media only screen and (min-width: 1450px) {
  .Button { color: red; }
}
.Button { color: green; }

Comments

[DaniilPo]

Спасибо большое за ответ
То есть в начале идёт изначальный стиль после него идёт media
В каком порядке будет правильно ставить несколько media ? Или без разницы?

[Сергей delphinpro]

DaniilPo, разница есть.
Ставить так

@media (min-width: 100px) {}
@media (min-width: 200px) {}
@media (min-width: 300px) {}

и наоборот с max-width

@media (max-width: 300px) {}
@media (max-width: 200px) {}
@media (max-width: 100px) {}

Answer 2

[tempick]

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

@media only screen and (min-width: 1450px) {
  .OrderButton{
    left: 40%!important;
    width: 10%important;
    border: 1rem solid white!important;
    font-size: 143.4%!important;
  }
}

(не советую так делать)