diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 752b443462..e447f6c319 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -10,8 +10,13 @@
 .modal-content {
   @extend %modal;
   min-height: #{150 / $base-font-size}rem;
-  width: #{500 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
+  
+  @media (min-width: 770px) {
+    width: #{500 / $base-font-size}rem;
+    
+  }
+
   .modal--reduced & {
     //min-height: #{150 / $base-font-size}rem;
   }
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 5decad9abe..808e4128cb 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -10,7 +10,6 @@
   flex-direction: column;
   outline: none;
   height: calc(80vh - #{65 / $base-font-size}rem);
-  max-height: #{460 / $base-font-size}rem;
   & .react-tabs {
     max-height: 100%;
     display: flex;
@@ -19,6 +18,11 @@
   & .react-tabs__tab-panel {
     overflow-y: auto;
   }
+  
+  @media (min-width: 770px) {
+    max-height: #{460 / $base-font-size}rem;
+    
+  }
 }
 
 .preference__minus-button,