Q:

media query device-width and "regular" width not working

In the code example below there are two cubes with styles for desktop and mobile. 
on the iphone for example the cube should be green whereas on desktop it should be (and is) red. 
On my iPhone in portrait view I get nothing, on landscape, it is red instead of green. 
Same on the iPad. 
On Google Chrome Developer Tools, when I choose Apple iPhone 5 Portrait, it doesn't show the media query in the Styles, as if it weren't recognising it or something. 
What am I doing wrong? 

/* for desktop */
@media only screen and (min-width: 400px) and (max-width: 767px) {
 #block2 {width:100px;height:100px;background:red;} 
}
/* for iPhone */
@media only screen and (min-device-width:320px) and (max-device-width: 767) {
 #block2 {width:100px;height:100px;background:green;} 
}
/* for desktop */
@media only screen and (min-width: 960px) and (max-width: 1024px) {
 #block {width:100px;height:100px;background:red;} 
}
/* for iPad */
@media only screen and (min-device-width:768px) and (max-device-width: 1024) {
 #block {width:100px;height:100px;background:green;} 
}
<div id="block"></div>
<div id="block2"></div>

A:

There is a syntax error:
(max-device-width: 767)
(max-device-width: 1024)

to
(max-device-width: 767px)
(max-device-width: 1024px)

