Issue with CSS media queries

Question

I'm having trouble with CSS media queries.

It won't recognize the line of code that I'm calling for the query.

I'm not sure what to do here, I see my CSS and it looks ok and should not be a problem, and yet...

Does anybody have this issue?

Is there something wrong in my code?

This is my CSS code:

@media  screen and (max-width: 600px) {

     .container {
      font-family:'Open Sans Condensed', sans-serif;
      width: 100%;
      margin: 0 auto;
      position: relative;
      overflow: auto;
     background-color: #fff; 
    }    
    }

    body{
        margin:0;
        padding: 0px;
        background-color: rgba(228,227,227,1);

    }

    .container{
        width: 800px;
        height: auto;
        clear: both;
        margin: 40px auto;
        overflow: auto;
        background-color: #fff; 
    }

Answer 1

Looking at your code I think your issue is a matter of order. You're calling your media query before the non-media query style so anything you set inside that media query is being overriden, here's how it needs to be in order for your media query to override the non-media query styles.

body{
    margin:0;
    padding: 0px;
    background-color: rgba(228,227,227,1);
}
.container{
    width: 800px;
    height: auto;
    clear: both;
    margin: 40px auto;
    overflow: auto;
    background-color: #fff; 
}
@media screen and (max-width: 600px) {
     .container {
          font-family:'Open Sans Condensed', sans-serif;
          width: 100%;
          margin: 0 auto;
          position: relative;
          overflow: auto;
          background-color: #fff; 
    }    
}