Improves responsive handling of tables and code blocks

tantalic · May 12, 2016 · b76bb08 · b76bb08
1 parent ba26e0d
commit b76bb08
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git a/assets/themes/clean.css b/assets/themes/clean.css
@@ -13,12 +13,12 @@ body {
     margin: 0 auto;
 }
 
- @media (max-width: 1000px) {
+@media (max-width: 1000px) {
     body {
         width: auto;
         margin: 0 16px;
     }
- }
+}
 
 h1, h2, h3, h4, h5, h6 {
     line-height: 1.2;
@@ -64,14 +64,20 @@ p + ul, p + ol {
 }
 
 table {
-    overflow: auto;
     margin-top: 0;
     margin-bottom: 1em;
     border-spacing: 0;
     border-collapse: collapse;
     border: 2px solid #f2f2f2;
 }
 
+@media (max-width: 1000px) {
+    table {
+        display: block;
+        overflow-x: auto;
+    }
+}
+
 h2 + table, h3 + table, h4 + table, h5 + table, h6 + table {
     margin-top: 1em;
 }
@@ -103,6 +109,8 @@ code {
 pre code {
     border-radius: 2px;
     font-size: 13px;
+    display: block;
+    overflow-x: auto;
 }
 
 blockquote {

diff --git a/assets/themes/developer.css b/assets/themes/developer.css
@@ -15,7 +15,7 @@ body {
     margin: 0 auto;
 }
 
- @media (max-width: 1000px) {
+@media (max-width: 1000px) {
     body {
         width: auto;
         margin: 0 16px;
@@ -134,6 +134,13 @@ table {
     border: 2px solid rgb(64,64,64);
 }
 
+@media (max-width: 1000px) {
+    table {
+        display: block;
+        overflow-x: auto;
+    }
+}
+
 h2 + table, h3 + table, h4 + table, h5 + table, h6 + table {
     margin-top: 1em;
 }
@@ -172,6 +179,8 @@ code {
 pre code {
     border-radius: 2px;
     font-size: 13px;
+    display: block;
+    overflow-x: auto;
 }
 
 img {

diff --git a/assets/themes/github.css b/assets/themes/github.css
@@ -86,6 +86,13 @@ table {
     border: 1px solid #ddd;
 }
 
+@media (max-width: 1000px) {
+    table {
+        display: block;
+        overflow-x: auto;
+    }
+}
+
 th, td {
     border: 1px solid #ddd;
     padding: 6px 14px;
@@ -108,6 +115,8 @@ code {
 pre code {
     border-radius: 2px;
     font-size: 13px;
+    display: block;
+    overflow-x: auto;
 }
 
 img {