Device compatible CSS - @media

Question

I am currently using @media only screen and (max-width:1000px) {} for device compatible css for my website which worked on phones after upload but not on a small monitor pc (around 1200px width). It supposedly was working on my home pc when I adjusted the width of the browser. Is the syntax line correct?

Answer 1

This line was missing from the head

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

Along with that was browser cache to add to the misery of my CSS life.

Answer 2

Your media query might be overlapping. Try this below one

@media screen (min-width: 800px) {
         //your style here !
    }

@media screen (min-width: 1200px) {
         //your style here !
    }