Fixed 320px & 480px responsive design implementations. Issue #4

Author: morgant

css/advanced.css

@@ -2,11 +2,27 @@ body {
 	width: 54em; /* 864px @ 16px */
 	margin-left: auto;
 	margin-right: auto;
+    padding: 1em;
+}
+
+/* Mobile Portrait CSS */
+/* @media all and (max-device-width: 320px) and (orientation:portrait) */
+@media all and (max-width: 320px) {
+	body {
+		width: 20em; /* 320px @ 16px */
+		padding: 0;
+		margin-left: 0;
+		margin-right: 0;
+	}
 }
 
 /* Mobile Landscape CSS */
-@media all and (max-device-width: 480px) and (orientation:portrait) {
+/* @media all and (max-device-width: 480px) and (orientation:landscape) */
+@media all and (min-width: 321px) and (max-width: 480px) {
 	body {
-		width: 22.375em; /* 358px @ 16px */
+		width: 30em; /* 480px @ 16px */
+		padding: 0;
+		margin-left: 0;
+		margin-right: 0;
 	}
-}
+}

css/basic.css

@@ -3,7 +3,6 @@
 
 body {
     font-family: Verdana, Arial, sans-serif;
-    padding: 1em;
     line-height: 1.5em; /* 24px @ 16px */
 }
 a:link {