diff --git a/rowers/dataprep.py b/rowers/dataprep.py
index ab3bdd13..d32a74a0 100644
--- a/rowers/dataprep.py
+++ b/rowers/dataprep.py
@@ -1345,6 +1345,9 @@ def new_workout_from_file(r, f2,
                       r.user.email)
         
         return (0, message, f2)
+    if fileformat == 'att':
+        # email attachment which can safely be ignored
+        return (0, '', f2)
 
     # handle non-Painsled by converting it to painsled compatible CSV
     if (fileformat != 'csv'):
diff --git a/rowers/mailprocessing.py b/rowers/mailprocessing.py
index 0618edb4..32e7f3b8 100644
--- a/rowers/mailprocessing.py
+++ b/rowers/mailprocessing.py
@@ -137,6 +137,8 @@ def make_new_workout_from_email(rower, datafile, name, cntr=0,testing=False):
 
     
     # handle non-Painsled
+    if fileformat == 'att':
+        return 0
     if fileformat != 'csv':
         filename_mediadir, summary, oarlength, inboard,fileformat = dataprep.handle_nonpainsled(
             'media/' + datafilename, fileformat, summary)
diff --git a/rowers/tasks.py b/rowers/tasks.py
index 01def2df..f64b6c54 100644
--- a/rowers/tasks.py
+++ b/rowers/tasks.py
@@ -1026,7 +1026,7 @@ def handle_sendemail_breakthrough(workoutid, useremail,
     d = {
         'first_name':userfirstname,
         'siteurl':siteurl,
-        'workoutid':workoutid,
+        'workoutid':encoder.encode_hex(workoutid),
         'btvalues':tablevalues,
         }
 
@@ -1071,7 +1071,7 @@ def handle_sendemail_hard(workoutid, useremail,
     d = {
         'first_name':userfirstname,
         'siteurl':siteurl,
-        'workoutid':workoutid,
+        'workoutid':encoder.encode_hex(workoutid),
         'btvalues':tablevalues,
         }
 
diff --git a/rowers/templates/flexchart3otw.html b/rowers/templates/flexchart3otw.html
index 0f5db1b5..4018f2b3 100644
--- a/rowers/templates/flexchart3otw.html
+++ b/rowers/templates/flexchart3otw.html
@@ -35,7 +35,7 @@
     
 <ul class="main-content">
   <li class="grid_4">
-    <div id="theplot" class="flexplot" style="min-width:300px;">
+    <div id="theplot" class="flexplot">
       {{ the_div|safe }}
     </div>
   </li>
diff --git a/rowers/tests/testdata/emails/ATT00001.txt b/rowers/tests/testdata/emails/ATT00001.txt
new file mode 100644
index 00000000..b28b04f6
--- /dev/null
+++ b/rowers/tests/testdata/emails/ATT00001.txt
@@ -0,0 +1,3 @@
+
+
+
diff --git a/rowers/tests/testdata/testdata.csv.gz b/rowers/tests/testdata/testdata.csv.gz
index 993710d9..c8996bfd 100644
Binary files a/rowers/tests/testdata/testdata.csv.gz and b/rowers/tests/testdata/testdata.csv.gz differ
diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css
index 35839e03..89587bf3 100644
--- a/static/css/rowsandall2.css
+++ b/static/css/rowsandall2.css
@@ -1005,6 +1005,7 @@ th.rotate > div > span {
   z-index: 10;
 }
 
+
 a.wh:link { 
     color: #e9e9e9;
 }
diff --git a/static/css/styles2.css b/static/css/styles2.css
index becf3231..2a8c9896 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -564,28 +564,28 @@
 
 
 
-@media  (min-height: 600px) {
+@media  only screen and (min-height: 600px) {
     .maxheight {
         max-height: 450px;
         overflow: scroll;
     }
 }
     
-@media  (min-height: 600px) {
+@media only screen and (min-height: 600px) {
     .maxheight {
         max-height: 450px;
         overflow: scroll;
     }
 }
     
-@media  (min-height: 800px) {
+@media only screen and (min-height: 800px) {
     .maxheight {
         max-height: 600px;
         overflow: scroll;
     }
 }
 
-@media  (min-height: 1000px) {
+@media only screen and (min-height: 1000px) {
     .maxheight {
         max-height: 800px;
         overflow: scroll;
@@ -593,7 +593,7 @@
 }
 
 
-@media  (max-width: 600px) {
+@media  only screen and (max-width: 600px) {
     nav a {
         font-size: 0px;
     }
@@ -601,9 +601,22 @@
     nav a i {
         font-size: 20px;
     }
+
+    #theplot .bk-grid-column {
+        display: none;
+    }
+
+    #theplot .bk-plot-layout {
+        position: auto;
+        width: 100%;
+        height: auto;
+        display: inline;
+    }
 }
 
-@media  (min-width: 450px) {
+
+
+@media only screen and (min-width: 450px) {
   .wrapper {
     grid-template-columns: 1fr 3fr;
     grid-template-areas: 
@@ -648,7 +661,7 @@
 }
 
 
-@media  (min-width: 768px) {
+@media only screen and (min-width: 768px) {
   .wrapper {
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas: 
@@ -727,7 +740,7 @@
         page-break-after: avoid;
     }
 
-    ul, img {
+    ul, img, table {
         page-break-inside: avoid;
     }