Add responsive column count. Set margin and width for max-width 40em.

1 files changed, 21 insertions, 0 deletions

diff --git a/test.scss b/test.scss
index d812557..1b69b07 100644
--- a/test.scss
+++ b/test.scss
@@ -26,17 +26,38 @@
 
 //Responsive design
 @media screen and (max-width: 40em) {
+#content {
+	width: 100%;
+	margin: 0;
+}
 .inlinepage {
 	background-color: Blue;
 }
+.columns {
+	-webkit-column-count: 1; /* Chrome, Safari, Opera */
+	-moz-column-count: 1; /* Firefox */
+	column-count: 1;
+}
 }
+
 @media screen and (min-width: 41em) and (max-width: 70em) {
 .inlinepage {
 	background-color: Black;
 }
+.columns {
+	-webkit-column-count: 2; /* Chrome, Safari, Opera */
+	-moz-column-count: 2; /* Firefox */
+	column-count: 2;
+}
 }
+
 @media only screen and (min-width: 71em) {
 .inlinepage {
 	background-color: Red;
 }
+.columns {
+	-webkit-column-count: 3; /* Chrome, Safari, Opera */
+	-moz-column-count: 3; /* Firefox */
+	column-count: 3;
+}
 }