Media queries don't work

1

Hi! I’m currently doing Product Landing Page from new curriculum, and I can’t get media queries to work. Here’s my code:

header {
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  background-color: #f8f2e8;
  @media (max-width: 650px) {
    flex-wrap: wrap;
  }
}

Codepen somehow doesn’t recognise the code inside the media query, showing it in white, like it’s invalid. Where is my mistake? I ran it through css linter and it showed me a mistake “missing RBRACE” on this line "@media (max-width: 650px) ", but it didn’t clear anything.
Here’s my whole pen: http://codepen.io/enk/pen/RKjNJK

2

Hi @Enikol

In plain CSS, nesting media queries (or any selectors) like that is invalid, you’ll want to do something like this:

header {
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  background-color: #f8f2e8;
}

@media (max-width: 650px) {
  header {
    flex-wrap: wrap;
  }
}
1 Like
3

Hi @Enikol
Another option from @joesmith100 is you can change the CSS compiler on CodePen to SCSS. This will let you nest media queries and also a bunch of other cool things: http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html

1 Like
4

Thank you both, @joesmith100 @Ethan-Arrowood ! It works now!