Improve responsiveness a bit.

2 files changed, 46 insertions, 13 deletions

diff --git a/css/garden.css b/css/garden.css
index 796fa73..d79caf7 100644
--- a/css/garden.css
+++ b/css/garden.css
@@ -405,25 +405,25 @@ body {
     text-rendering: optimizeLegibility;
 }
 
-@media (min-width: 1140px) {
+@media (min-width: 1600px) {
     .container {
-        margin-left: 14rem;
+        margin-left: 4rem;
         margin-right: 4rem;
-        max-width: 52rem;
+        max-width: 50rem;
     }
 }
 
-@media (min-width: 800px) and (max-width: 1140px) {
+@media (min-width: 800px) and (max-width: 1600px) {
     .container {
-        margin-left: 6rem;
-        margin-right: 4rem;
-        max-width: 52rem;
+        margin-left: 2rem;
+        margin-right: 2rem;
     }
 }
 
 @media (max-width: 800px) {
     .container {
-        margin: 1rem;
+        margin-left: 1rem;
+        margin-right: 1rem;
     }
 }
 
@@ -432,6 +432,12 @@ h1, h2, h3 {
     line-height: 110%;
 }
 
+@media (max-width: 1000px) {
+    .table-container {
+        overflow: scroll;
+    }
+}
+
 table {
     border-collapse: collapse;
 }
@@ -488,17 +494,42 @@ a:visited {
     background-color: #000000bb;
 }
 
+
 .modal {
     position: fixed;
-    left: 40%;
-    top: 25%;
-    width: 20%;
-    height: 50%;
     border-radius: 4px;
     background-color: #121212;
     padding: 2em;
 }
 
+@media (min-width: 1600px) {
+    .modal {
+        left: 30%;
+        top: 25%;
+        width: 40%;
+        height: 50%;
+    }
+}
+
+@media (min-width: 800px) and (max-width: 1600px) {
+    .modal {
+        left: 20%;
+        top: 25%;
+        width: 60%;
+        height: 50%;
+    }
+}
+
+@media (max-width: 800px) {
+    .modal {
+        left: 5%;
+        top: 25%;
+        width: 90%;
+        height: 50%;
+    }
+}
+
+
 .detail-subheading {
     opacity: 60%;
 }
diff --git a/index.html b/index.html
index 00ef0bc..c3aa1ae 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,9 @@
           <li><img src="images/direct-sow.svg" class="key"/>: direct sow outdoors</li>
           <li><img src="images/transplant.svg" class="key"/>: transplant outdoors</li>
         </ul>
-        <table id="schedule"></table>
+        <div class="table-container">
+          <table id="schedule"></table>
+        </div>
       </div>
       <h2>Week-by-week instructions</h2>
       <div id="instructions"></div>