CSS Media Queries - Not Working

Question

I have a set of breakpoints that I am trying to work with and am using the following CSS code to change css rules however the rules are only being applied to screens over 1200px wide and not the others.

/* Large Desktop Devices */
@media (min-width: 1200px) {
    .header {
        height: 120px;   
    }

}

/* Small Desktop Devices and iPad Landscape */
@media (min-width: 1024px) and (max-width: 1199px) {
    .header {
        height: 120px;   
    }

}

/* iPad and Tablets Potrait */
@media (min-width: 768px) and (max-width: 1023px)
    .header {
        height: 100px;   
    }

}

/* Large Screen Phones */
@media (min-width: 480px) and (max-width: 767px)
    .header {
        height: 90px;   
    }

}

/* Small Screen Phones */
@media (min-width: 320px) and (max-width: 479px)
    .header {
        height: 80px;   
    }

}

If anyone can see why this isn't working, I would love to know!

Thanks

Answer 1

use like this @media screen and (max-width:1200px) @media only screen and (max-width:1200px)

Answer 2

ensure you have added viewport metatag in your page

<meta name="viewport" content="width=device-width, initial-scale=1">

also You are missing opening braces on the last 3 statements 

/* Large Desktop Devices */
@media (min-width: 1200px) {
    .header {
        height: 120px;   
    }

}

/* Small Desktop Devices and iPad Landscape */
@media (min-width: 1024px) and (max-width: 1199px) {
    .header {
        height: 120px;   
    }

}

/* iPad and Tablets Potrait */
@media (min-width: 768px) and (max-width: 1023px){
    .header {
        height: 100px;   
    }

}

/* Large Screen Phones */
@media (min-width: 480px) and (max-width: 767px){
    .header {
        height: 90px;   
    }

}

/* Small Screen Phones */
@media (min-width: 320px) and (max-width: 479px)
    .header {
        height: 80px;   
    }

}

hope it helps.