1 files changed, 19 insertions, 14 deletions
diff --git a/mobile.css b/mobile.css
index 475c40c..c965da0 100644
--- a/mobile.css
+++ b/mobile.css
@@ -75,6 +75,10 @@ button {
     background-color: white;
 }
 
+.genome .codon>ol {
+    display: flex;
+}
+
 .genome .codon .amino-acid {
     border-top: 1px solid black;
     text-align: center;
@@ -87,14 +91,17 @@ button {
     height: 32px;
     width: 32px;
     font-size: 18px;
-    text-align: center;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: center;
 }
 
 .genome .nucleotide span {
-    display: inline-block;
+    display: inline-flex;
+    height: 32px;
+    width: 32px;
+    justify-content: space-around;
+    align-items: center;
 }
 
 #instructions {
@@ -152,10 +159,8 @@ button {
 
 #nucleotide-selector {
     position: relative;
+    display: flex;
     white-space: nowrap;
-    word-spacing: -6px; /* TODO: 0 doesn't work. And for some reason whitespace is being renderded between <li> elements? */
-    width: 8em; /* TODO: this shouldn't be hard coded. */
-
     background-color: ivory;
     border: 1px solid black;
 }
@@ -165,6 +170,15 @@ button {
     cursor: pointer;
 }
 
+#nucleotide-selector li {
+    display: inline-flex;
+    height: 32px;
+    width: 32px;
+    font-size: 18px;
+    justify-content: space-around;
+    align-items: center;
+}
+
 #nucleotide-selector li:hover,
 .genome:not(.locked) .nucleotide:hover {
     background-color: orange;
@@ -220,15 +234,6 @@ button {
     background-color: red;
 }
 
-#nucleotide-selector li {
-    display: inline-block;
-    width: 2em;
-    flex-basis: 2em;
-    text-align: center;
-    padding-top: 1ex;
-    padding-bottom: 1ex;
-}
-
 #lethality-selector {
     position: fixed;
     left: 50%;