diff --git a/src/web/stylesheets/layout/_banner.css b/src/web/stylesheets/layout/_banner.css
index bf407946..22871c4b 100755
--- a/src/web/stylesheets/layout/_banner.css
+++ b/src/web/stylesheets/layout/_banner.css
@@ -8,9 +8,9 @@
 
 #banner {
     position: absolute;
-    height: 30px;
+    height: 40px;
     width: 100%;
-    line-height: 30px;
+    line-height: 40px;
     border-bottom: 1px solid var(--primary-border-colour);
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 344efe3c..87e9c5a9 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -413,7 +413,8 @@
     font-family: var(--fixed-width-font-family);
     font-weight: normal;
     font-size: 8pt;
-    margin: 0 5px;
+    /*0 5px for desktop*/
+    margin: 5px 15px;
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css
index ab6826c0..20240bff 100755
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -29,8 +29,9 @@ body {
 /*//////// mobile ui updates below ///////////*/
 /* this is temporary ( unorganised and unrefined )*/
 
+/*@todo: use a banner-height var or something so these two will always align*/
 #workspace-wrapper {
-    margin-top: 30px;
+    margin-top: 40px;
 }
 
 #content-wrapper,