Search code examples
cssmedia-queriesblogsblogger

Why isn't media query working on my blog?

This is my blog: Blog I've written following code in its CSS:

@media screen and (max-width: 600px){
.title a{
color: red !important;
}
}
@media screen and (max-width: 500px){
header{
display: none !important;
}
}

But it does nothing when I open this blog in any phone. The site opens AS IT IS whether you open in phone or desktop browser. Why is it so?

Solution

  • You have this in your header, <meta content="width=1100" name="viewport">

    Please change that to: <meta name="viewport" content="width=device-width, initial-scale=1">

    For understanding how meta viewport works see: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

    What happens in your code is you have set "atleast 1100px" width for your web pages.

    By changing that to device width, your web pages will be as wide as the device.