This is perhaps a toddler level responsive web basic. But it took me a good 20 minutes to figure it out.
If you want to write conditional css3 for one viewport range, you must have the other condition also within a viewport condition.
For example to use:

@media screen and (max-width: 540px) { #box{ width:300px;} }

You will need to make sure the other mentioning of #box width is inside another condition

@media screen and (min-width: 540px) { #box{ width:600px;} }

Otherwise it will only look at the css that is not within a condition. Thank you to WebDesigner Wall:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries