update website min width, fix pre elements expanding too far

1 files changed, 25 insertions, 9 deletions

diff --git a/src/scss/main.scss b/src/scss/main.scss
index 4face22..3dcbf5e 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -109,15 +109,6 @@ body {
 	text-align: left;
 }
 
-@media (max-width: ($page-width + $outer-gap * 2)) {
-	body, #header,
-	#main, #footer,
-	#container {
-		width: 100%;
-		min-width: 250px;
-	}
-}
-
 #header,
 #footer {
 	display: block;
@@ -179,6 +170,25 @@ body {
 	}
 }
 
+/* once the page has been shrank to max content width */
+@media (max-width: ($page-width + $outer-gap * 2)) {
+	body {
+		width: 1px;
+		min-width: 100%;
+
+		.center {
+			  display: block;
+		}
+	}
+
+	.center, #header,
+	#main, #footer,
+	#container {
+		width: 100%;
+		max-width: 100%;
+	}
+}
+
 @media (max-width: 800px) {
 	#header {
 		display: block;
@@ -210,6 +220,12 @@ body {
 	}
 }
 
+@media (max-width: 300px) {
+	body {
+	      width: 300px;
+	}
+}
+
 #footer {
 	padding: $inner-gap;