Как при адаптивной верстке задать значения для max-width 768 и меньше (у меня не работает почему-то)?

Question

[OldKelt]

Делаю свой первый сайт, поэтому прошу сильно не ругаться за кривизну и примитивизм.

Суть в том, что после значений для max-width 991 для всех остальных разрешений изменения не работают. Но если я скопирую строчки для, например, max-width 768 перед max-width 991, то все будет работать прекрасно. Где я туплю?

Comments

[Ankhena]

Выложите код с проблемой в песочницу jsfiddle.net
Видимо, ошибка в коде или стили перебивают друг друга. Чтобы сказать почему, нужно видеть как вы пишете.
И попробуйте обойтись селекторами с двойной максимальной вложенностью.
Например, для иконок большего размера достаточно написать
.fa-2x {}
а не всю вон ту гармошку

Answer 1

[Faber Estello]

При max-width от большего к меньшему :

@media (max-width: 992px) {...}
@media (max-width: 768px) {...}

При min-width от меньшего к большему:

@media (min-width: 768px) {...}
@media (min-width: 992px) {...}

Comments

[OldKelt]

Вот и проблема в том, что когда ввожу значения для 768 они не работаю. А в просмотре кода страница ссылается на 991.

Answer 2

[Darya Shvakh]

OldKelt, Добрый день.
Чаще всего

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

Но бывает и

@media screen and (min-width: 320px) and (max-width: 768px) {
}