mobile friendly

3 files changed, 45 insertions, 31 deletions

diff --git a/packages/demobank-ui/src/scss/bank.scss b/packages/demobank-ui/src/scss/bank.scss
index 16370227b..0089b9734 100644
--- a/packages/demobank-ui/src/scss/bank.scss
+++ b/packages/demobank-ui/src/scss/bank.scss
@@ -310,3 +310,8 @@ h1.nav {
   background: rgb(66, 184, 221);
   /* this is a light blue */
 }
+
+[name=wire-transfer-form] > input {
+  margin-bottom: 1em;
+  
+}
\ No newline at end of file
diff --git a/packages/demobank-ui/src/scss/demo.scss b/packages/demobank-ui/src/scss/demo.scss
index cd676f8d9..c2d9fa903 100644
--- a/packages/demobank-ui/src/scss/demo.scss
+++ b/packages/demobank-ui/src/scss/demo.scss
@@ -39,8 +39,8 @@ Colors:
 }
 
 .content {
-  margin-left: 2em;
-  margin-right: 2em;
+  margin-left: 1em;
+  margin-right: 1em;
   overflow-x: auto;
 }
 
@@ -60,8 +60,8 @@ body {
   margin-bottom: 50px;
   width: 100%;
   color: white;
-  position: -webkit-sticky;
-  position: sticky;
+  // position: -webkit-sticky;
+  // position: sticky;
   top: 0px;
   width: 100vw;
   backdrop-filter: blur(10px);
@@ -70,7 +70,7 @@ body {
 }
 
 nav {
-  left: 1vw;
+  // left: 1vw;
   position: relative;
   background: #0042b2;
   z-index: 100;
@@ -83,7 +83,7 @@ nav span,
   border: none;
   color: white;
   text-align: center;
-  text-decoration: none;
+  // text-decoration: none;
   display: inline-block;
   font-size: 16px;
   background: #0042b2;
@@ -94,8 +94,9 @@ nav a,
 nav button,
 nav span,
 .navbtn {
-  padding: 15px 32px;
+  padding: 8px;
 }
+    
 
 nav a:hover,
 nav span:hover,
@@ -138,7 +139,7 @@ nav .hide div.nav {
 // }
 
 .langbtn {
-  width: 100%;
+  width: 100px;
   text-align: left;
 }
 
@@ -156,3 +157,11 @@ nav .hide div.nav {
   width: auto;
   height: auto;
 }
+
+.demolist > a {
+  margin: 8px;
+}
+
+.buttons-account input.pure-button {
+  margin: 8px;
+}
\ No newline at end of file
diff --git a/packages/demobank-ui/src/scss/pure.scss b/packages/demobank-ui/src/scss/pure.scss
index 652d20edf..25a261a5f 100644
--- a/packages/demobank-ui/src/scss/pure.scss
+++ b/packages/demobank-ui/src/scss/pure.scss
@@ -1091,29 +1091,29 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 }
 
 @media only screen and (max-width: 480px) {
-  .pure-form button[type="submit"] {
-    margin: 0.7em 0 0;
-  }
-
-  .pure-form input:not([type]),
-  .pure-form input[type="text"],
-  .pure-form input[type="password"],
-  .pure-form input[type="email"],
-  .pure-form input[type="url"],
-  .pure-form input[type="date"],
-  .pure-form input[type="month"],
-  .pure-form input[type="time"],
-  .pure-form input[type="datetime"],
-  .pure-form input[type="datetime-local"],
-  .pure-form input[type="week"],
-  .pure-form input[type="number"],
-  .pure-form input[type="search"],
-  .pure-form input[type="tel"],
-  .pure-form input[type="color"],
-  .pure-form label {
-    margin-bottom: 0.3em;
-    display: block;
-  }
+  // .pure-form button[type="submit"] {
+  //   margin: 0.7em 0 0;
+  // }
+
+  // .pure-form input:not([type]),
+  // .pure-form input[type="text"],
+  // .pure-form input[type="password"],
+  // .pure-form input[type="email"],
+  // .pure-form input[type="url"],
+  // .pure-form input[type="date"],
+  // .pure-form input[type="month"],
+  // .pure-form input[type="time"],
+  // .pure-form input[type="datetime"],
+  // .pure-form input[type="datetime-local"],
+  // .pure-form input[type="week"],
+  // .pure-form input[type="number"],
+  // .pure-form input[type="search"],
+  // .pure-form input[type="tel"],
+  // .pure-form input[type="color"],
+  // .pure-form label {
+  //   margin-bottom: 0.3em;
+  //   display: block;
+  // }
 
   .pure-group input:not([type]),
   .pure-group input[type="text"],