Проблемы с синтаксисом медиазапроса

Question

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

CSS

nav ul {
  width: 35vw;
  position: relative;
  left: 300px;
  top: 30px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

  @media (max-width: 1033px) {
    left: 150px;
  }
}

Когда я набираю это, кажется, что левое свойство является значением. Он распознает его как свойство, если я ставлю точку с запятой после 1033px, но ничего не происходит, когда я изменяю размер браузера? Любые ваши советы будут оценены. Спасибо!

Answer 1

То, как вы пишете, работает, только если вы используете препроцессор CSS, такой как LESS или SASS.Но в обычном CSS вы должны написать медиа-запрос отдельно, а не внутри правила CSS для определенного селектора.Итак, ваш пример должен быть таким:

nav ul {
  width: 35vw;
  position: relative;
  left: 300px;
  top: 30px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

@media (max-width: 1033px) {
  nav ul {
    left: 150px;
  }
}