Adjust hero balance on mobile

ui/app/css/itcss/components/hero-balance.scss

@@ -28,13 +28,13 @@ $break-large: 576px;
       text-align: center;
 
       .token-amount {
-        font-size: 1.8em;
+        font-size: 175%;
-        margin-top: 1em;
+        margin-top: 15%;
       }
 
       .fiat-amount {
-        font-size: 1.1em;
+        font-size: 115%;
-        margin-top: 0.8em;
+        margin-top: 8.5%;
       }
     }
 
@@ -55,9 +55,14 @@ $break-large: 576px;
   }
 
   .hero-balance-icon {
-    border-radius: 10vw;
+    border-radius: 30px;
+    width: 60px;
+    height: 60px;
     // TODO: colors
     border: 1px solid #DEDEDE; 
+
+    @media screen and (min-width: $break-large) {
+      border-radius: 10vw;
       width: 5vw;
       height: 5vw;
       min-width: 45px;
@@ -66,35 +71,35 @@ $break-large: 576px;
       max-height: 65px;
     }
 
-  .hero-balance-buttons {
+  }
-    button.btn-clear {
-      width: 5%;
-      height: 32px;
-      font-size: .7em;
-      background: white;
-      border: 1px solid;
 
+  .hero-balance-buttons {
     @media screen and (max-width: $break-small) {
       width: 100%;
-        margin-top: 1.3em;
+      height: 100px; // needed a round number to set the heights of the buttons inside
     }
 
     @media screen and (min-width: $break-large) {
       flex-grow: 2;
-        height: 4.2vh;
-        min-height: 28px;
-        font-size: .7em;
     }
 
-    }
+    button.btn-clear {
+      font-size: 75%;
+      background: white;
+      border: 1px solid;
 
       @media screen and (max-width: $break-small) {
-      width: 100%;
+        width: 22%;
-      margin-top: 1.3em;
+        height: 55%;
       }
 
       @media screen and (min-width: $break-large) {
+        width: 5%;
         flex-grow: 2;
+        height: 4.2vh;
+        min-height: 28px;
+        font-size: .7em;
+      }
     }
 
   }