Search code examples
htmlcssmedia-queries

media queries not loading

This has been killing me for the past few hours..

No media queries appear to be making any changes in my code. Nothing shows up in chrome dev tools, yet its in my stylesheet.

I'm just trying to set a max-width on the body, and left and right margins to auto when the size is above 768px.

Here's my post css code:

body {
  bottom: 0;

  @media and screen (width >= 768px) {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

}

which ouputs this css:

body {
  bottom: 0;

}

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

  body {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

I included <meta name="viewport" content="width=device-width, initial-scale=1"> in my head tag. Is there something I'm missing?

It works fine when its not inside the media query.

http://jsfiddle.net/2msm1p1L/

Solution

  • You got your order mixed up - and comes after screen

    body {
  bottom: 0;
}
@media screen and (min-width: 768px) {
  body {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.placeholder {
  background: red;
  height: 200px;
  width: 100%;
}
    <div class="placeholder"></div>