CSS @media for distinguishing mobile and desktop devices

I tried setting two different styles for a website using @media. But it always loads the desktop view no matter if I use a phone or a computer.

/* desktop screen */
@media (min-width: 801px){
   content desktop
}
    
/* mobile screen */
@media (max-width: 800px){
  content mobile
}

What have I done wrong?

Solution 1:

The actual answer to your question is: you're using width and device-width wrong. Change line #169 from:

@media (max-device-width: 800px){

to:

@media (max-width: 800px){

If you want to target phones specifically, it is a good idea to look at media queries used by popular frameworks such as bootstrap or foundation. You'll find that many target much smaller sizes such as 320px or 480px as opposed to 800px in your code.