CODEWITHSUNDEEP
cssblogspot
user2952257
user2952257

Reputation: 11

Media Queries are not working on Blogspot

I am trying to implement media queries on blogspot here - http://cricketbeta.blogspot.in/

But they are not working, please give it a look and tell me where I am wrong

    @media screen and (max-width : 479px) {
/* If screen size less than 479px Load these styles */
/* Done for Smart Phones */
.content{width: 100%!important;}
.sidebar{display: none;}
.container{width:100%;
#topmenu{display: none}
}


@media screen and (min-width: 480px) and (max-width : 768px) {
/* If screen size less than 768px Load these styles */
/* Done for Tablets */
#middle .content{width: 100%!important;}
.sidebar{display: none;}
.container{width:100%;}
.header-bottom{width:100%}
}

@media screen and (min-width: 768px) and (max-width : 1024px) {
/* If screen size less than 960px Load these styles */
/* Done for Tablets */
.content{width: 100%!important;}
.sidebar{width: 100%;}
.container{width:100%;}
.header-bottom{width:100%}
}

Upvotes: 1

Views: 645

Answers (1)

evilscary
evilscary

Reputation: 2217

The media queries I use are below. It looks like you might be missing a few of the specifiers.

iPhone:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {

}

@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {

}

iPad:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (max-device-height: 1024px) and (orientation:portrait) {

}

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (max-device-height: 1024px) and (orientation:landscape) {

}

Upvotes: 0

Related Questions