🐛 fix issue w/ responsiveness due to media querie

device-width is deprecated and only works in chrome it seems. reworked to use regular min/max-width queries for both scss & react-responsive. submitted a ticket to react-responsive to fix

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;

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;

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;

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;
   }

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 />

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;
   }
 }

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>

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;

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

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