CODEWITHSUNDEEP
htmlcss
dwinnbrown
dwinnbrown

Reputation: 4009

CSS Media Queries - Not Working

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

Upvotes: 2

Views: 2788

Answers (4)

akash
akash

Reputation: 2157

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

    }

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

    }

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

    }

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

    }

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

    }

Upvotes: 2

madhu
madhu

Reputation: 242

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.

Upvotes: 2

Dass Prakash
Dass Prakash

Reputation: 152

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

Upvotes: 4

Jay
Jay

Reputation: 1678

You need to change it to @ media all and (max-width: 480px)

Upvotes: 1

Related Questions