Vikas Kumar Vikas Kumar - 1 year ago 69
CSS Question

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){
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?

Answer Source

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:

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download