Add an additional font-size breakpoint for buy modal on the largest screens

2 files changed, 20 insertions, 2 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 6ab793524..f6acd89a9 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -160,7 +160,7 @@ App.prototype.renderGlobalModal = function() {
         ]),
 
         h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Coinbase'),
+          h('div.modal-content-option-title', {}, 'Direct Deposit'),
           h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
         ]),
 
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 7fc7a6ca6..7f36d1d2b 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -87,11 +87,29 @@
 
     div.modal-content-option-title {
       font-size: 20px;
+
+      @media screen and (max-width: 679px) {
+        font-size: 14px;
+      }
+
+      @media screen and (min-width: 1281px) {
+        font-size: 26px;
+      }
     }
 
     div.modal-content-option-subtitle {
       font-size: 16px;
-      padding: 0px 20px;
+      padding: 0px 10px;
+      height: 25%;
+
+      @media screen and (max-width: 679px) {
+        font-size: 10px;
+      }
+
+      @media screen and (min-width: 1281px) {
+        font-size: 20px;
+      }
+
     }
 
     div.modal-content-footer {