diff --git a/src/components/ContextualInfo/contextual-info.scss b/src/components/ContextualInfo/contextual-info.scss
index 909c4d7eab..f6c4f5c753 100644
--- a/src/components/ContextualInfo/contextual-info.scss
+++ b/src/components/ContextualInfo/contextual-info.scss
@@ -28,7 +28,7 @@
     border-top-right-radius: 1rem;
     transition: 250ms ease-in-out;
 
-    @media only screen and (min-device-width : 768px) {
+    @media only screen and (min-width : 768px) {
       max-width: 560px;
       position: absolute;
       margin-left: auto;
diff --git a/src/components/CurrencyInputPanel/currency-panel.scss b/src/components/CurrencyInputPanel/currency-panel.scss
index 2cc6324cc2..0af6e04824 100644
--- a/src/components/CurrencyInputPanel/currency-panel.scss
+++ b/src/components/CurrencyInputPanel/currency-panel.scss
@@ -254,7 +254,7 @@
     font-weight: 200;
   }
 
-  @media only screen and (min-device-width : 768px) {
+  @media only screen and (min-width : 768px) {
     max-width: 560px;
     max-height: 768px;
     position: absolute;
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index d5dc929b3e..88ea1204d7 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -68,7 +68,7 @@
     }
   }
 
-  @media only screen and (min-device-width : 768px) {
+  @media only screen and (min-width : 768px) {
     //position: fixed;
     top: 0px;
     left: 0px;
diff --git a/src/index.scss b/src/index.scss
index f5225842c3..ed8d07bfbf 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -22,7 +22,7 @@ html, body {
   background-color: $white;
   z-index: 100;
   -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
-  @media only screen and (min-device-width : 768px) {
+  @media only screen and (min-width : 768px) {
     justify-content: center;
     align-items: center;
   }
diff --git a/src/pages/App.js b/src/pages/App.js
index d5f7928ab7..cab584dfee 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -40,7 +40,7 @@ class App extends Component {
 
     return (
       <div id="app-container">
-        <MediaQuery query="(min-device-width: 768px)">
+        <MediaQuery query="(min-width: 768px)">
           <Header />
         </MediaQuery>
         <Web3Connect />
diff --git a/src/pages/App.scss b/src/pages/App.scss
index 3bf3ab2ae1..12b8a0b22a 100644
--- a/src/pages/App.scss
+++ b/src/pages/App.scss
@@ -5,9 +5,10 @@
     height: 100%;
     position: relative;
 
-    @media only screen and (min-device-width : 768px) {
+    @media only screen and (min-width : 768px) {
       margin: auto;
-      width: 560px;
+      max-width: 560px;
+      width: 100%;
     }
 
     & > div {
@@ -25,7 +26,7 @@
   height: 100vh;
   @extend %col-nowrap;
 
-  @media only screen and (min-device-width : 768px) {
+  @media only screen and (min-width : 768px) {
     //max-width: 560px;
   }
 }
diff --git a/src/pages/Pool/index.js b/src/pages/Pool/index.js
index d9baea4f89..21bf925368 100644
--- a/src/pages/Pool/index.js
+++ b/src/pages/Pool/index.js
@@ -16,7 +16,7 @@ class Pool extends Component {
   render() {
     return (
       <div className="pool">
-        <MediaQuery query="(max-device-width: 768px)">
+        <MediaQuery query="(max-width: 768px)">
           <Header />
         </MediaQuery>
         <Switch>
diff --git a/src/pages/Pool/pool.scss b/src/pages/Pool/pool.scss
index 72ff8851c3..d1aa1b802c 100644
--- a/src/pages/Pool/pool.scss
+++ b/src/pages/Pool/pool.scss
@@ -92,7 +92,7 @@
     border-top-right-radius: 1rem;
     transition: 250ms ease-in-out;
 
-    @media only screen and (min-device-width : 768px) {
+    @media only screen and (min-width : 768px) {
       max-width: 560px;
       position: absolute;
       margin-left: auto;
@@ -130,7 +130,7 @@
   transition: 250ms ease-in-out;
   padding: 1rem 0 .5rem;
 
-  @media only screen and (min-device-width : 768px) {
+  @media only screen and (min-width : 768px) {
     max-width: 560px;
     position: absolute;
     margin-left: auto;
diff --git a/src/pages/Send/index.js b/src/pages/Send/index.js
index 8b520b8ede..60a4ddd3ad 100644
--- a/src/pages/Send/index.js
+++ b/src/pages/Send/index.js
@@ -719,7 +719,7 @@ class Send extends Component {
 
     return (
       <div className="send">
-        <MediaQuery query="(max-device-width: 767px)">
+        <MediaQuery query="(max-width: 767px)">
           <Header />
         </MediaQuery>
         <div
diff --git a/src/pages/Swap/index.js b/src/pages/Swap/index.js
index faafa7f741..5b1090037d 100644
--- a/src/pages/Swap/index.js
+++ b/src/pages/Swap/index.js
@@ -701,7 +701,7 @@ class Swap extends Component {
 
     return (
       <div className="swap">
-        <MediaQuery query="(max-device-width: 767px)">
+        <MediaQuery query="(max-width: 767px)">
           <Header />
         </MediaQuery>
         <div