various styling fix on mobile

1 files changed, 10 insertions, 6 deletions

diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 8f6731358..bdbdd2645 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -6,8 +6,9 @@
     justify-content: flex-start;
     align-items: center;
     margin: .3em .9em 0;
-    height: 80vh;
-    max-height: 225px;
+    // height: 80vh;
+    // max-height: 225px;
+    flex: 0 0 auto;
   }
 
   @media screen and (min-width: $break-large) {
@@ -26,6 +27,7 @@
 
     @media screen and (max-width: $break-small) {
       flex-direction: column;
+      flex: 0 0 auto;
     }
 
     @media screen and (min-width: $break-large) {
@@ -78,7 +80,9 @@
 
     @media screen and (max-width: $break-small) {
       width: 100%;
-      height: 100px; // needed a round number to set the heights of the buttons inside
+      // height: 100px; // needed a round number to set the heights of the buttons inside
+      flex: 0 0 auto;
+      padding: 16px 0;
     }
 
     @media screen and (min-width: $break-large) {
@@ -93,9 +97,9 @@
       font-size: 12px;
 
       @media screen and (max-width: $break-small) {
-        width: 23%;
-        height: 55%;
-        border-color: $black;
+        border-color: $curious-blue;
+        color: $curious-blue;
+        height: 36px;
       }
 
       @media screen and (min-width: $break-large) {