diff --git a/src/_frameless.scss b/src/_frameless.scss
index 85f85f011..fb90c97da 100644
--- a/src/_frameless.scss
+++ b/src/_frameless.scss
@@ -35,7 +35,7 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
 $cols12: (12 * ($column + $gutter) - $gutter) / $em;
 
 $desktop: 942px;
-$mobileIntermediary: 640px;
+$mobileIntermediate: 640px;
 $tabletPortrait: 768px;
 $mobile: 480px;
 
diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx
index 464203ef9..4b512de1c 100644
--- a/src/components/carousel/carousel.jsx
+++ b/src/components/carousel/carousel.jsx
@@ -31,7 +31,7 @@ const Carousel = props => {
                 }
             },
             {
-                breakpoint: frameless.tablet,
+                breakpoint: frameless.mobileIntermediate,
                 settings: {
                     slidesToScroll: 2,
                     slidesToShow: 2
diff --git a/src/components/carousel/legacy-carousel.jsx b/src/components/carousel/legacy-carousel.jsx
index 24e978d3f..8f1fd244a 100644
--- a/src/components/carousel/legacy-carousel.jsx
+++ b/src/components/carousel/legacy-carousel.jsx
@@ -35,7 +35,7 @@ const Carousel = props => {
                 }
             },
             {
-                breakpoint: frameless.tablet,
+                breakpoint: frameless.mobileIntermediate,
                 settings: {
                     slidesToScroll: 2,
                     slidesToShow: 2
diff --git a/src/components/footer/www/footer.jsx b/src/components/footer/www/footer.jsx
index 9d9f4cb61..c6018f70a 100644
--- a/src/components/footer/www/footer.jsx
+++ b/src/components/footer/www/footer.jsx
@@ -13,7 +13,7 @@ require('./footer.scss');
 
 const Footer = props => (
     <FooterBox>
-        <MediaQuery maxWidth={frameless.tablet - 1}>
+        <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
             <div className="lists">
                 <dl>
                     <dd>
@@ -51,7 +51,7 @@ const Footer = props => (
                 </dl>
             </div>
         </MediaQuery>
-        <MediaQuery minWidth={frameless.tablet}>
+        <MediaQuery minWidth={frameless.mobileIntermediate}>
             <div className="lists">
                 <dl>
                     <dt>
diff --git a/src/components/masonrygrid/masonrygrid.jsx b/src/components/masonrygrid/masonrygrid.jsx
index 5f654488d..ecea539d9 100644
--- a/src/components/masonrygrid/masonrygrid.jsx
+++ b/src/components/masonrygrid/masonrygrid.jsx
@@ -39,12 +39,12 @@ class MasonryGrid extends React.Component {
     render () {
         return (
             <this.props.as className={classNames('masonry', this.props.className)}>
-                <MediaQuery maxWidth={frameless.tablet - 1}>
+                <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
                     {this.props.children}
                 </MediaQuery>
                 <MediaQuery
                     maxWidth={frameless.desktop - 1}
-                    minWidth={frameless.tablet}
+                    minWidth={frameless.mobileIntermediate}
                 >
                     {this.reorderColumns(this.props.children, 2)}
                 </MediaQuery>
diff --git a/src/components/modal/comments/modal.scss b/src/components/modal/comments/modal.scss
index c48068821..2659b5d37 100644
--- a/src/components/modal/comments/modal.scss
+++ b/src/components/modal/comments/modal.scss
@@ -1,7 +1,7 @@
 @import "../../../colors";
 @import "../../../frameless";
 
-$medium-and-small: "screen and (max-width : #{$mobileIntermediary}-1)";
+$medium-and-small: "screen and (max-width : #{$mobileIntermediate}-1)";
 
 .mod-report * {
     box-sizing: border-box;
diff --git a/src/lib/frameless.js b/src/lib/frameless.js
index 01757c18d..174f95a60 100644
--- a/src/lib/frameless.js
+++ b/src/lib/frameless.js
@@ -3,7 +3,7 @@
  */
 const frameless = {
     desktop: 942,
-    tablet: 640,
+    mobileIntermediate: 640,
     tabletPortrait: 768,
     mobile: 480
 };
diff --git a/src/views/parents/parents.scss b/src/views/parents/parents.scss
index d87699538..d194657c9 100644
--- a/src/views/parents/parents.scss
+++ b/src/views/parents/parents.scss
@@ -150,7 +150,7 @@ $story-width: $cols3;
 }
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediary - 1) {
+@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) {
     .flex-row {
         &.sidebar-row {
 
@@ -179,7 +179,7 @@ $story-width: $cols3;
 
 
 //8 columns
-@media only screen and (min-width: $mobileIntermediary) and (max-width: $desktop - 1) {
+@media only screen and (min-width: $mobileIntermediate) and (max-width: $desktop - 1) {
     .masthead {
         h1 {
             text-align: center;
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index d330c2aff..529b1f46b 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -343,7 +343,7 @@ const PreviewPresentation = ({
                                     onUpdateProjectThumbnail={onUpdateProjectThumbnail}
                                 />
                             </div>
-                            <MediaQuery maxWidth={frameless.tablet - 1}>
+                            <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                 <FlexRow className="preview-row force-center">
                                     <div className="wrappable-item">
                                         <Stats
@@ -380,7 +380,7 @@ const PreviewPresentation = ({
                                 <RemixCredit projectInfo={parentInfo} />
                                 <RemixCredit projectInfo={originalInfo} />
                                 {/*  eslint-disable max-len */}
-                                <MediaQuery maxWidth={frameless.tablet - 1}>
+                                <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                     {(extensions && extensions.length) ? (
                                         <FlexRow className="preview-row">
                                             {extensionChips}
@@ -491,7 +491,7 @@ const PreviewPresentation = ({
                                 {/*  eslint-enable max-len */}
                             </FlexRow>
                         </FlexRow>
-                        <MediaQuery minWidth={frameless.tablet}>
+                        <MediaQuery minWidth={frameless.tabletPortrait}>
                             <FlexRow className="preview-row">
                                 <Stats
                                     faved={faved}
@@ -521,7 +521,7 @@ const PreviewPresentation = ({
                                 />
                             </FlexRow>
                         </MediaQuery>
-                        <MediaQuery minWidth={frameless.tablet}>
+                        <MediaQuery minWidth={frameless.tabletPortrait}>
                             {(extensions && extensions.length) ? (
                                 <FlexRow className="preview-row">
                                     {extensionChips}
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index c7cd94f36..c949398f8 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -352,6 +352,7 @@ $stage-width: 480px;
 
     @media #{$medium-and-smaller} {
         .preview-row {
+            margin-top: .5rem;
             align-items: center;
         }
     }
@@ -419,6 +420,7 @@ $stage-width: 480px;
 
         @media #{$medium-and-smaller} {
             flex-direction: row;
+            margin-bottom: .5rem;
         }
     }
 
diff --git a/src/views/splash/feature/top-banner.scss b/src/views/splash/feature/top-banner.scss
index dce738216..c3ca9cf91 100644
--- a/src/views/splash/feature/top-banner.scss
+++ b/src/views/splash/feature/top-banner.scss
@@ -106,7 +106,7 @@
     }
 }
 
-@media only screen and (min-width: $mobileIntermediary) {
+@media only screen and (min-width: $mobileIntermediate) {
     .feature-top-banner {
         margin-bottom: 80px; // double the normal banner 40px for the notch
 
@@ -161,7 +161,7 @@
     }
 }
 
-@media only screen and (min-width: $mobileIntermediary) and (max-width: $desktop - 1) {
+@media only screen and (min-width: $mobileIntermediate) and (max-width: $desktop - 1) {
     .feature-top-banner {
         .feature-banner-images {
             overflow: hidden; // make sure overflow is hidden to avoid scrolling with translated content
@@ -176,7 +176,7 @@
     }
 }
 
-@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediary - 1) {
+@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) {
     .feature-top-banner {
         .feature-banner-image {
             &.right {
diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx
index 5a4af32b5..0fb4c42ad 100644
--- a/src/views/splash/presentation.jsx
+++ b/src/views/splash/presentation.jsx
@@ -278,7 +278,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                 </Box>
             );
         }
-        
+
         if (
             this.props.sessionStatus === sessionActions.Status.FETCHED &&
             Object.keys(this.props.user).length === 0 &&
@@ -287,7 +287,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
             rows.push(
                 <MediaQuery
                     key="frameless-tablet"
-                    minWidth={frameless.tablet}
+                    minWidth={frameless.mobileIntermediate}
                 >
                     <MiddleBanner />
                 </MediaQuery>
@@ -473,7 +473,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                 >
                     {
                         this.props.sessionStatus === sessionActions.Status.FETCHED &&
-                        Object.keys(this.props.user).length > 0 && // user is logged in 
+                        Object.keys(this.props.user).length > 0 && // user is logged in
                         <div
                             className="splash-header"
                             key="header"
diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss
index 7443933bd..2e0964b88 100644
--- a/src/views/splash/splash.scss
+++ b/src/views/splash/splash.scss
@@ -165,7 +165,7 @@
 
     .modal-content-iframe.mod-confirmation {
         border-radius: 0;
-        width: $mobileIntermediary - 1;
+        width: $mobileIntermediate - 1;
     }
 }
 
diff --git a/src/views/wedo2-legacy/wedo2.scss b/src/views/wedo2-legacy/wedo2.scss
index d351a6c0d..103ae63bc 100644
--- a/src/views/wedo2-legacy/wedo2.scss
+++ b/src/views/wedo2-legacy/wedo2.scss
@@ -226,7 +226,7 @@
 
         .inner {
             margin: 0 auto;
-            width: $mobileIntermediary;
+            width: $mobileIntermediate;
         }
     }
 }