From 4dda960a37861ca3ace8e778d6bcb0b8026765a6 Mon Sep 17 00:00:00 2001
From: Jim Hague <jim.hague@acm.org>
Date: Mon, 7 Nov 2016 20:31:41 +0000
Subject: [PATCH] Rearrange instrument table from horizontal to vertical on
 narrow screens.

---
 web/css/dottes.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/web/css/dottes.css b/web/css/dottes.css
index 727f548..04fdd10 100644
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@@ -110,11 +110,13 @@ div.dottes-transpose-instrument-name
 div.dottes-transpose-instrument-how
 {
     width: 55%;
+    text-align: left;
 }
 
 div.dottes-transpose-tune-types
 {
     width: 30%;
+    text-align: center;
 }
 
 div.dottes-tune-display
@@ -378,6 +380,22 @@ div.dottes-history-yes
 }
 
 @media only screen and (max-device-width: 480px) {
+    div.dottes-transpose-instrument-item
+    {
+        display: table-row;
+        vertical-align: middle;
+        text-align: center;
+        padding: 0px;
+        margin: 0px;
+    }
+
+    div.dottes-transpose-instrument-item h1, p, ul
+    {
+        text-align: center;
+        margin: 0px;
+        padding: 0px;
+    }
+
     div.dottes-tune-footer
     {
     }