adding max height as a class

rowers/templates/agegroupchart.html

@@ -17,7 +17,7 @@
 <h1>Interactive Plot</h1>
 
 <ul class="main-content">
-  <li class="grid_4">
+  <li class="maxheight grid_4">
     <p>This chart shows the
       <a href="http://www.concept2.com/indoor-rowers/racing/records/world">
         Indoor Rower World Records

rowers/templates/agegroupcp.html

@@ -18,7 +18,7 @@
 <h1>Interactive Plot</h1>
 
 <ul class="main-content">
-  <li class="grid_4">
+  <li class="maxheight grid_4">
     {{ the_div|safe }}
   </li>
 </ul>

rowers/templates/list_workouts.html

@@ -150,7 +150,7 @@ xo
     {% endif %}
     </p>
   </li>
-  <li class="grid_4">
+  <li class="maxheight grid_4">
     
     {% if workouts %}
     <table width="100%" class="listtable shortpadded">

static/css/styles2.css

@@ -385,6 +385,10 @@
     grid-column-end: span 1;
 }
 
+.maxheight {
+    max-height: 300px;
+    overflow: scroll;
+}
 
 .main-content li.grid_4 {
     grid-column-end: span 1;
@@ -397,6 +401,34 @@
     padding: 5px;
 }
 
+@media (min-height: 600px) {
+    .maxheight {
+        max-height: 450px;
+        overflow: scroll;
+    }
+}
+    
+@media (min-height: 600px) {
+    .maxheight {
+        max-height: 450px;
+        overflow: scroll;
+    }
+}
+    
+@media (min-height: 800px) {
+    .maxheight {
+        max-height: 600px;
+        overflow: scroll;
+    }
+}
+
+@media (min-height: 1000px) {
+    .maxheight {
+        max-height: 800px;
+        overflow: scroll;
+    }
+}
+
 @media (max-width: 600px) {
     nav a {
         font-size: 0px;

templates/newbase.html

@@ -119,7 +119,7 @@
       var active = "#{{ active }}";
       $(active).addClass("nav-active");
       });
-      </script>
+    </script>
     {% analytical_head_bottom %}
   </head>