CODEWITHSUNDEEP
cssmedia-queries
ctrice
ctrice

Reputation: 11

Media Query Syntax issues

Not sure why this isn't working and this could be a quick fix, but I cannot get my css media query to recognize properties and values properly. I think I am messing up the syntax possibly. Any thoughts? Heres my code bit I'm using

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;
  }
}

When I type that in it seems like it thinks the left property is a value. It recognizes it as a property if I put a semicolon after the 1033px, but nothing happens still when I change the browser size? Any advice you have would be appreciated. Thanks!

Upvotes: 0

Views: 27

Answers (1)

Johannes
Johannes

Reputation: 67738

The way you write it only works if you use a CSS preprocessor like LESS or SASS. But in regular CSS, you have to write the media query separately, not inside the CSS rule for a certain selector. So your example would have to be like this:

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;
  }
}

Upvotes: 1

Related Questions