Что я не правильно делаю с Media queries?

Question

[Никита Болдышев]

Делаю адаптив для двух кнопок. При определенных размерах экрана происходить разное смещения от края.
Когда размер экрана становиться меньше 1600px, все срабатывает, как нужно. Когда размер экрана становиться меньше 1200px, происходит блокировка и значение используется от 1600px. Скриншот ниже. Что я неправильно делаю?

@media only screen and (max-width : 1200px) {
    .get {
     margin: 125px 0px 0px 13%;
    }
    .more {
    margin: 125px 13% 0px 0px;
    }
}

@media only screen and (max-width : 1600px) {
    .get {
     margin: 125px 0px 0px 18%;
    }
    .more {
    margin: 125px 18% 0px 0px;
    }

}

Answer 1

[Вадим Белкин]

Если именно такие нужны размеры для media нужны ( media only screen and (max-width : 1200px) и media only screen and (max-width : 1600px) ) то попробуйте поменять их местами.

Comments

[Никита Болдышев]

Заработало. Только вот не понимаю, зачем нужно было менять местами?

[Вадим Белкин]

kowkoed: по приоритету в CSS срабатывает последнее написанное правило. У вас media немного неверно записаны.

[Никита Болдышев]

Вадим Белкин: Значит лучше использовать Media от большего к меньшему?

[Вадим Белкин]

kowkoed: посмотрите как используется во всех адаптивных фреймворках. Там работает правило mobile first - сперва идут стили для наименьшего разрешения, а после добавляются для следующего большего разрешения. Например

.container {
width: 320px;
}
@media (min-width : 768px) {
.container {
width: 600px;
}
}
@media (min-width : 1200px) {
.container {
width: 1000px;
}
}

Из вашего кода я не совсем понимаю зачем вам (max-width : 1600px)

Answer 2

[Андрей]

media only screen and (min-width : 1201px) and (max-width : 1600px) {