diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss
index caa532bb4..2d13f184c 100644
--- a/src/components/modal/addtostudio/modal.scss
+++ b/src/components/modal/addtostudio/modal.scss
@@ -1,41 +1,60 @@
 @import "../../../colors";
 @import "../../../frameless";
 
+$small: "only screen and (max-width : #{$mobile})";
+$medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}-1)";
+$small-height: "only screen and (max-height : #{$mobile})";
+$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
+
 .mod-addToStudio * {
-    box-sizing: border-box;
+    // box-sizing: border-box;
 }
 
 .mod-addToStudio {
-    margin: 100px auto;
-    outline: none;
-    padding: 0;
-    width: 36.25rem; /* 580px; */
+    // margin: 100px auto;
+    // outline: none;
+    // padding: 0;
+    // max-width: 36.25rem; /* 580px; */
     height: 388px; /* 24.25rem; */
-    overflow: hidden;
-    user-select: none;
+    // overflow: hidden;
+    // user-select: none;
+    //
+    // @media #{$medium}, #{$medium-height} {
+    //     margin: 40px auto;
+    // }
+    //
+    // @media #{$small}, #{$small-height} {
+    //     width: auto;
+    //     height: 100%;
+    //     margin: 0 auto;
+    // }
 }
 
 .addToStudio-modal-header {
     box-shadow: inset 0 -1px 0 0 $ui-blue-dark;
     background-color: $ui-blue;
-    padding-top: .75rem;
-    width: 100%;
-    height: 3rem;
-    box-sizing: border-box;
+    // padding-top: .75rem;
+    // width: 100%;
+    // height: 3rem;
+    // box-sizing: border-box;
+
+    // @media #{$small}, #{$small-height} {
+    //     border-radius: 0;
+    // }
 }
 
-.addToStudio-content-label {
-    text-align: center;
-    color: $type-white;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 1rem;
-    font-weight: bold;
-}
+// .addToStudio-content-label {
+//     text-align: center;
+//     color: $type-white;
+//     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+//     font-size: 1rem;
+//     font-weight: bold;
+// }
 
 .addToStudio-modal-content {
     margin: 0 auto;
     width: 100%;
-    font-size: .875rem;
+    // font-size: .875rem;
 }
 
 .studio-list-outer-scrollbox {
diff --git a/src/components/modal/addtostudio/presentation.jsx b/src/components/modal/addtostudio/presentation.jsx
index 168a26b7c..4ec9d9950 100644
--- a/src/components/modal/addtostudio/presentation.jsx
+++ b/src/components/modal/addtostudio/presentation.jsx
@@ -37,18 +37,19 @@ const AddToStudioModalPresentation = ({
 
     return (
         <Modal
+            standardSizes
             className="mod-addToStudio"
             contentLabel={contentLabel}
             isOpen={isOpen}
             onRequestClose={onRequestClose}
         >
             <div>
-                <div className="addToStudio-modal-header">
-                    <div className="addToStudio-content-label">
+                <div className="addToStudio-modal-header modal-header">
+                    <div className="addToStudio-content-label content-label">
                         {contentLabel}
                     </div>
                 </div>
-                <div className="addToStudio-modal-content">
+                <div className="addToStudio-modal-content modal-content">
                     <div className="studio-list-outer-scrollbox">
                         <div className="studio-list-inner-scrollbox">
                             <div className="studio-list-container">
diff --git a/src/components/modal/base/modal.jsx b/src/components/modal/base/modal.jsx
index c06c8e5ee..658dfaf5d 100644
--- a/src/components/modal/base/modal.jsx
+++ b/src/components/modal/base/modal.jsx
@@ -27,7 +27,9 @@ class Modal extends React.Component {
             <ReactModal
                 appElement={document.getElementById('app')}
                 className={{
-                    base: classNames('modal-content', this.props.className),
+                    base: classNames('modal-content', this.props.className, {
+                        'modal-sizes': this.props.standardSizes
+                    }),
                     afterOpen: classNames('modal-content', this.props.className),
                     beforeClose: classNames('modal-content', this.props.className)
                 }}
@@ -60,7 +62,8 @@ class Modal extends React.Component {
 Modal.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    overlayClassName: PropTypes.string
+    overlayClassName: PropTypes.string,
+    standardSizes: PropTypes.boolean
 };
 
 module.exports = Modal;
diff --git a/src/components/modal/base/modal.scss b/src/components/modal/base/modal.scss
index cb878ae12..62bd2110c 100644
--- a/src/components/modal/base/modal.scss
+++ b/src/components/modal/base/modal.scss
@@ -1,6 +1,12 @@
 @import "../../../colors";
 @import "../../../frameless";
 
+$small: "only screen and (max-width : #{$mobile})";
+$medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}-1)";
+$big: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)";
+$small-height: "only screen and (max-height : #{$mobile})";
+$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
+
 .modal-content {
     position: relative;
     margin: 3.75rem auto;
@@ -13,6 +19,18 @@
     &:focus {
         outline: none;
     }
+
+    @media #{$small}, #{$medium}, #{$big} {
+        margin-top: 0;
+        width: 100%;
+        overflow: scroll;
+    }
+
+    @media #{$small}, #{$small-height} {
+        height: 100%;
+        box-shadow: none;
+        border-radius: 0;
+    }
 }
 
 .modal-overlay {
@@ -43,23 +61,6 @@ $modal-close-size: 1rem;
     padding-top: $modal-close-size / 2;
 }
 
-@media only screen and (max-width: $desktop - 1) {
-    .modal-content {
-        top: 0;
-        left: 0;
-        margin-top: 0;
-        border-radius: 0;
-        box-shadow: none;
-        width: 100%;
-        height: 100%;
-        overflow: scroll;
-    }
-
-    .modal-content-close {
-        position: fixed;
-    }
-}
-
 /* Close button, Submit button, etc. */
 .action-buttons {
     display: flex;
@@ -68,6 +69,10 @@ $modal-close-size: 1rem;
     justify-content: flex-end !important;
     align-items: flex-start;
     flex-wrap: nowrap;
+
+    @media #{$small}, #{$medium}, #{$big} {
+        justify-content: center !important;
+    }
 }
 
 /* setting overall modal to contain overflow looks good, but isn't
@@ -108,3 +113,48 @@ row to appear to contain overflow. */
     overflow: visible;
     color: $type-white;
 }
+
+.modal-sizes * {
+    box-sizing: border-box;
+}
+
+.modal-sizes {
+    margin: 100px auto;
+    outline: none;
+    padding: 0;
+    max-width: 36.25rem; /* 580px; */
+    overflow: hidden;
+    user-select: none;
+
+    @media #{$medium}, #{$medium-height} {
+        margin: 40px auto;
+    }
+
+    @media #{$small}, #{$small-height} {
+        width: auto;
+        margin: 0 auto;
+    }
+
+    .modal-header {
+        padding-top: .75rem;
+        width: 100%;
+        height: 3rem;
+        box-sizing: border-box;
+
+        @media #{$small}, #{$small-height} {
+            border-radius: 0;
+        }
+    }
+
+    .content-label {
+        text-align: center;
+        color: $type-white;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-size: 1rem;
+        font-weight: bold;
+    }
+
+    .modal-content {
+        font-size: .875rem;
+    }
+}
diff --git a/src/components/modal/report/modal.jsx b/src/components/modal/report/modal.jsx
index e376398f5..9cf3d14bd 100644
--- a/src/components/modal/report/modal.jsx
+++ b/src/components/modal/report/modal.jsx
@@ -111,6 +111,7 @@ class ReportModal extends React.Component {
         const contentLabel = intl.formatMessage({id: `report.${type}`});
         return (
             <Modal
+                standardSizes
                 className="mod-report"
                 contentLabel={contentLabel}
                 isOpen={isOpen}
@@ -118,8 +119,8 @@ class ReportModal extends React.Component {
                 {...modalProps}
             >
                 <div>
-                    <div className="report-modal-header">
-                        <div className="report-content-label">
+                    <div className="report-modal-header modal-header">
+                        <div className="report-content-label content-label">
                             {contentLabel}
                         </div>
                     </div>
@@ -130,7 +131,7 @@ class ReportModal extends React.Component {
                         onValid={this.handleValid}
                         onValidSubmit={onReport}
                     >
-                        <div className="report-modal-content">
+                        <div className="report-modal-content modal-content">
                             {isConfirmed ? (
                                 <div className="received">
                                     <div className="received-header">
diff --git a/src/components/modal/report/modal.scss b/src/components/modal/report/modal.scss
index 375ac6227..1f2bf18be 100644
--- a/src/components/modal/report/modal.scss
+++ b/src/components/modal/report/modal.scss
@@ -1,6 +1,11 @@
 @import "../../../colors";
 @import "../../../frameless";
 
+$small: "only screen and (max-width : #{$mobile})";
+$medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}-1)";
+$small-height: "only screen and (max-height : #{$mobile})";
+$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
+
 .mod-report * {
     box-sizing: border-box;
 }
@@ -9,32 +14,45 @@
     margin: 100px auto;
     outline: none;
     padding: 0;
-    width: 36.25rem; /* 580px; */
+    max-width: 36.25rem; /* 580px; */
     user-select: none;
+
+    @media #{$medium}, #{$medium-height} {
+        margin: 40px auto;
+    }
+
+    @media #{$small}, #{$small-height} {
+        width: auto;
+        margin: 0 auto;
+    }
 }
 
 .report-modal-header {
     border-radius: 1rem 1rem 0 0;
     box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
     background-color: $ui-coral;
-    padding-top: .75rem;
-    width: 100%;
-    height: 3rem;
-    box-sizing: border-box;
+    // padding-top: .75rem;
+    // width: 100%;
+    // height: 3rem;
+    // box-sizing: border-box;
+    //
+    // @media #{$small}, #{$small-height} {
+    //     border-radius: 0;
+    // }
 }
 
-.report-content-label {
-    text-align: center;
-    color: $type-white;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 1rem;
-    font-weight: bold;
-}
+// .report-content-label {
+//     text-align: center;
+//     color: $type-white;
+//     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+//     font-size: 1rem;
+//     font-weight: bold;
+// }
 
 .report-modal-content {
     margin: 1rem auto;
     width: 80%;
-    font-size: .875rem;
+    // font-size: .875rem;
 
     .instructions {
         line-height: 1.5rem;
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 542c31d7b..a582a6007 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -11,6 +11,7 @@ $small: "screen and (max-width : #{$mobile}-1)";
 $medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
 $big: "screen and (min-width : #{$tablet})";
 $medium-and-small: "screen and (max-width : #{$tablet}-1)";
+$little-height: "screen and (max-height : 460px)";
 
 /* override view padding for share banner */
 #view {