Почему медиазапрос не работает?

Question

[Dmitry Katyushin]

.navbar {
  position: relative;
  height: 52px;
  margin-bottom: 20px;
  border: 2px solid transparent;
}
@media (min-width: 768px) {
  .navbar {
      min-height: 52px;
  }
}

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

Answer 1

[Александр Цымбал]

используйте условие в медиа не min-width, а max-width.
min-width - срабатывает, когда ваша ширина больше чем указанное значение.
а max-width - это максимальная ширина, при которой будет срабатывать данное правило. т.е если ширина меньше этого значения - правило срабатывает. Если ширина превышает это значение, то ничего не происходит!

Comments

[Dmitry Katyushin]

Пробовал и так и сяк, не выходит..

[Александр Цымбал]

Dmitry Katyushin: тогда давайте ссылку на код, будем смотреть

[Dmitry Katyushin]

Александр Цымбал: да в коде ничего такого, тоже самое сейчас с чистым bootstrap-ом проделал - результат тотже, если написать .navbar { min-height: 50px; } то все будет нормально и без медиазапросов

Answer 2

[ExpFront]

Попробуйте написать : media all and (min-width ....

Answer 3

[ostinred]

media screen and (min-width: 768px) {}
медиа правилу нужны границы, от и до.

Answer 4

[Alex Zi]

У меня в chrome брикпоинт 768px срабатывает только на 560px. В мозилле деввелоп все ок работает.