fix mobile interface

css/main.css

@@ -54,7 +54,7 @@ html, body {height: 100%;}
   position: relative;
   float: right;
   margin-left: 15px;
-  height: 62px;
+  /* height: 551px; */
 }
 
 .logo {
@@ -64,13 +64,6 @@ html, body {height: 100%;}
   margin: 0 auto;
 }
 
-@media (max-width: 640px) {
-  .logo {
-    margin: 0 auto;
-    margin-bottom: 10px;
-  }
-}
-
 .top-bar-section li:not(.has-form) a:not(.button) {
   line-height: 60px;
 }
@@ -129,7 +122,6 @@ html, body {height: 100%;}
 }
 
 .panel {
-  /* padding: 0.7rem 1rem; */
   border:0;
 }
 
@@ -155,7 +147,7 @@ html, body {height: 100%;}
 }
 
 .box-backup {
-  margin: 2rem 0;
+  margin: 0.6rem 0;
   padding: 2rem 1rem;
 }
 
@@ -621,3 +613,41 @@ p.dr-notification-text {
   white-space: nowrap;
 }
 
+@media only screen and (max-width: 40em) { 
+  .top-bar {
+    background: #1ABC9C;
+  }
+
+  .header-content {
+    padding: 0.3rem 0rem 1rem 0.4rem;
+  }
+
+  .logo {
+    background-size: 90px 44px !important;
+    float: left;
+    margin-top: 0.7rem;
+  }
+
+  .header-content .small-9 {
+    text-align: right !important;
+  }
+
+  .header-content .line-dashed-v {
+    border: none !important;  
+  }
+
+  .header-content {
+    font-size: 80%;
+    line-height: 140%;
+  }
+
+  .box-backup {
+    margin: 0.6rem 0;
+  }
+
+  #footer {
+    font-size: 80%;
+    padding: 0.2rem 0.5rem;
+  }
+
+}

css/tpl-clean.css

@@ -1,5 +1,5 @@
 .logo {
-  background: transparent url('../img/logo.png');
+  background: transparent url('../img/logo.png') no-repeat;
 }
 
 #footer {

css/tpl-default.css

@@ -38,8 +38,8 @@ body {
 }
 
 .logo {
-  background: transparent url('../img/logo-negative.svg');
-  background-size: 131px 51px;
+  background: transparent url('../img/logo-negative.svg') no-repeat;
+  background-size: 130px 51px;
 }
 
 .top-bar-section li:not(.has-form) a:not(.button) {

index.html

@@ -16,10 +16,10 @@
       <div data-ng-init="init()" data-ng-controller="HeaderController">
         <div class="header"> 
           <div class="header-content">
-            <div class="large-3 medium-3 columns">
+            <div class="large-3 medium-3 small-3 columns">
               <span class="logo"></span>
             </div>
-            <div class="large-9 medium-9 columns text-center p10t" ng-show="$root.wallet">
+            <div class="large-9 medium-9 small-9 columns text-center p10t" ng-show="$root.wallet">
               <div class="large-4 medium-4 columns line-dashed-v">
                 <a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
                   <strong><span>{{$root.wallet.getName()}}</span></strong>
@@ -56,7 +56,7 @@
           <ul class="title-area">
             <li class="name"></li>
             <li class="toggle-topbar menu-icon">
-              <a ng-click="isCollapsed=!isCollapsed"> Menu</a>
+              <a ng-click="isCollapsed=!isCollapsed"></a>
             </li>
           </ul>
 
@@ -133,7 +133,7 @@
       </div>
     </div>
     <div class="row p10t" ng-show="$root.wallet">
-      <div class="large-3 medium-3 small-3 columns">
+      <div class="large-3 medium-3 hide-for-small columns">
         <div>
           <strong>{{$root.wallet.getName()}}</strong>
         </div>
@@ -347,7 +347,6 @@
                       <i class="fi-bitcoin"></i>
                     </span>
                   </span>
-
                 </a>
 
                 <button class="button small secondary radius" ng-click="showAll=!showAll" ng-show="(addresses|withoutFunds) > 1">