Having trouble getting multiple media queries to work using min/max-width and min/max-device width

_x000D_ _x000D_ When I try to create a layout for both the browser and mobile device it breaks all but one of the css styles. I previously had it working for only min/max-width (3 styles for browser size) but since the setting isn't picked up on retina display mobile devices it wasn't as useful as I thought it would be. I added min/max-device-width to address the iphone but I no longer can get the alternate formatting in the browser. If I attempt to add the settings for the browser window only the largest CSS will display and the others are unformatted (including on the iphone). I left the code so that it could be copied and pasted for testing- just in case:) 1st attempt to fix: syntax with a comma @media and(min-device-width: 800px), and (min-width: 800px){ but I believe that is incorrect to use. 2nd attempt to fix: I copied the style and tried to paste it into separate media queries ie. Min-width: 600px {style, style, style} min-device-width: 600px{same style, style, style} 3rd attempt to fix: I have tried a few different "styles" of media queries (@media all ... @ media screen) nothing worked. The larges css will only work if the order goes from smallest to largest. In reverse none of them work. The text will change from green (largest), red (medium), orange (small) if it was working.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.