diff --git a/src/_frameless.scss b/src/_frameless.scss
index 0881a3ec6..fb90c97da 100644
--- a/src/_frameless.scss
+++ b/src/_frameless.scss
@@ -35,7 +35,8 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
 $cols12: (12 * ($column + $gutter) - $gutter) / $em;
 
 $desktop: 942px;
-$tablet: 640px;
+$mobileIntermediate: 640px;
+$tabletPortrait: 768px;
 $mobile: 480px;
 
 /* Media Queries */
@@ -48,11 +49,11 @@ $mobile: 480px;
 */
 
 $small: "only screen and (max-width : #{$mobile}-1)";
-$medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
-$intermediate: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)";
+$medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tabletPortrait}-1)";
+$intermediate: "only screen and (min-width : #{$tabletPortrait}) and (max-width : #{$desktop}-1)";
 $big: "only screen and (min-width : #{$desktop})";
 
-$medium-and-smaller: "only screen and (max-width : #{$tablet}-1)";
+$medium-and-smaller: "only screen and (max-width : #{$tabletPortrait}-1)";
 $intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)";
 
 $medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-width : #{$desktop}-1)";
@@ -60,7 +61,7 @@ $medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-wid
 /* Height */
 
 $small-height: "only screen and (max-height : #{$mobile} - 1)";
-$medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$tablet} - 1)";
+$medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$tabletPortrait} - 1)";
 
 
 //
@@ -112,7 +113,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
 
         #{$child-selector} {
             margin: 0 auto;
-            width: $tablet;
+            width: $tabletPortrait;
         }
     }
 }
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 40a526fe3..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 : #{$tablet}-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 6c93deed5..174f95a60 100644
--- a/src/lib/frameless.js
+++ b/src/lib/frameless.js
@@ -3,7 +3,8 @@
  */
 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 42d6d2325..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: $tablet - 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: $tablet) 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/comment/comment.scss b/src/views/preview/comment/comment.scss
index cff4c131b..bdc93a397 100644
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@@ -1,4 +1,5 @@
 @import "../../../colors";
+@import "../../../frameless";
 
 .compose-comment {
     margin-left: .5rem;
@@ -228,6 +229,14 @@
                     content: "";
                 }
             }
+
+            /* hide comment input on tablets and mobile */
+            @media #{$medium-and-smaller} {
+                .comment-reply {
+                    display: none;
+                }
+            }
+
         }
     }
 
@@ -256,6 +265,13 @@
     margin-bottom: 1.5rem;
 }
 
+/* hide comment input on tablets and mobile */
+@media #{$medium-and-smaller} {
+    .comments-root-reply {
+        display: none;
+    }
+}
+
 .comment-reply-row {
     margin-top: 1.5rem;
     margin-left: .5rem;
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 4df2ea031..529b1f46b 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -343,43 +343,49 @@ const PreviewPresentation = ({
                                     onUpdateProjectThumbnail={onUpdateProjectThumbnail}
                                 />
                             </div>
-                            <MediaQuery maxWidth={frameless.tablet - 1}>
+                            <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                 <FlexRow className="preview-row force-center">
-                                    <Stats
-                                        faved={faved}
-                                        favoriteCount={favoriteCount}
-                                        loveCount={loveCount}
-                                        loved={loved}
-                                        projectInfo={projectInfo}
-                                        onFavoriteClicked={onFavoriteClicked}
-                                        onLoveClicked={onLoveClicked}
-                                    />
-                                    <Subactions
-                                        addToStudioOpen={addToStudioOpen}
-                                        canReport={canReport}
-                                        isAdmin={isAdmin}
-                                        projectInfo={projectInfo}
-                                        reportOpen={reportOpen}
-                                        shareDate={shareDate}
-                                        userOwnsProject={userOwnsProject}
-                                        onAddToStudioClicked={onAddToStudioClicked}
-                                        onAddToStudioClosed={onAddToStudioClosed}
-                                        onCopyProjectLink={onCopyProjectLink}
-                                        onReportClicked={onReportClicked}
-                                        onReportClose={onReportClose}
-                                        onReportSubmit={onReportSubmit}
-                                        onToggleStudio={onToggleStudio}
-                                    />
+                                    <div className="wrappable-item">
+                                        <Stats
+                                            faved={faved}
+                                            favoriteCount={favoriteCount}
+                                            loveCount={loveCount}
+                                            loved={loved}
+                                            projectInfo={projectInfo}
+                                            onFavoriteClicked={onFavoriteClicked}
+                                            onLoveClicked={onLoveClicked}
+                                        />
+                                    </div>
+                                    <div className="wrappable-item">
+                                        <Subactions
+                                            addToStudioOpen={addToStudioOpen}
+                                            canReport={canReport}
+                                            isAdmin={isAdmin}
+                                            projectInfo={projectInfo}
+                                            reportOpen={reportOpen}
+                                            shareDate={shareDate}
+                                            userOwnsProject={userOwnsProject}
+                                            onAddToStudioClicked={onAddToStudioClicked}
+                                            onAddToStudioClosed={onAddToStudioClosed}
+                                            onCopyProjectLink={onCopyProjectLink}
+                                            onReportClicked={onReportClicked}
+                                            onReportClose={onReportClose}
+                                            onReportSubmit={onReportSubmit}
+                                            onToggleStudio={onToggleStudio}
+                                        />
+                                    </div>
                                 </FlexRow>
                             </MediaQuery>
                             <FlexRow className="project-notes">
                                 <RemixCredit projectInfo={parentInfo} />
                                 <RemixCredit projectInfo={originalInfo} />
                                 {/*  eslint-disable max-len */}
-                                <MediaQuery maxWidth={frameless.tablet - 1}>
-                                    <FlexRow className="preview-row">
-                                        {extensionChips}
-                                    </FlexRow>
+                                <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
+                                    {(extensions && extensions.length) ? (
+                                        <FlexRow className="preview-row">
+                                            {extensionChips}
+                                        </FlexRow>
+                                    ) : null}
                                 </MediaQuery>
                                 {showInstructions && (
                                     <div className="description-block">
@@ -485,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}
@@ -515,10 +521,12 @@ const PreviewPresentation = ({
                                 />
                             </FlexRow>
                         </MediaQuery>
-                        <MediaQuery minWidth={frameless.tablet}>
-                            <FlexRow className="preview-row">
-                                {extensionChips}
-                            </FlexRow>
+                        <MediaQuery minWidth={frameless.tabletPortrait}>
+                            {(extensions && extensions.length) ? (
+                                <FlexRow className="preview-row">
+                                    {extensionChips}
+                                </FlexRow>
+                            ) : null}
                         </MediaQuery>
                         {showModInfo &&
                             <FlexRow className="preview-row">
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 2a4dc91b3..c949398f8 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -110,6 +110,9 @@ $stage-width: 480px;
 
         @media #{$medium-and-smaller} {
             flex-direction: row;
+            .inplace-input {
+                width: calc(100% - 4rem);
+            }
         }
 
         @media #{$small} {
@@ -141,7 +144,7 @@ $stage-width: 480px;
         flex-grow: 1;
 
         @media #{$medium-and-smaller} {
-            min-width: 100%;
+            min-width: calc(100% - 2rem);
         }
     }
 
@@ -341,6 +344,17 @@ $stage-width: 480px;
                 flex-direction: row;
             }
         }
+
+        .wrappable-item {
+            margin-bottom: .5rem;
+        }
+    }
+
+    @media #{$medium-and-smaller} {
+        .preview-row {
+            margin-top: .5rem;
+            align-items: center;
+        }
     }
 
     .guiPlayer {
@@ -384,7 +398,7 @@ $stage-width: 480px;
         flex-flow: column;
 
         @media #{$medium-and-smaller} {
-            margin-top: 1rem;
+            margin-top: .5rem;
             margin-left: 0;
             width: 100%;
         }
@@ -406,6 +420,7 @@ $stage-width: 480px;
 
         @media #{$medium-and-smaller} {
             flex-direction: row;
+            margin-bottom: .5rem;
         }
     }
 
@@ -537,7 +552,7 @@ $stage-width: 480px;
         margin-top: 1rem;
         background-color: $ui-blue-10percent;
         padding: 1rem 0;
-        min-height: 12rem;
+        min-height: 6rem;
     }
 
     .create-comment {
@@ -599,6 +614,7 @@ $stage-width: 480px;
         .thumbnail-column {
             display: inline-block;
             width: 100%;
+            max-width: 300px;
 
             /* TODO: the following can be transferred to
             src/components/thumbnailcolumn/thumbnailcolumn.scss
diff --git a/src/views/preview/subactions.scss b/src/views/preview/subactions.scss
index 528d27803..1e5cadb16 100644
--- a/src/views/preview/subactions.scss
+++ b/src/views/preview/subactions.scss
@@ -2,7 +2,6 @@
 @import "../../frameless";
 
 .subactions {
-    margin-left: 1.5rem;
     justify-content: flex-end;
     align-items: flex-start;
     flex: 1;
@@ -20,7 +19,7 @@
         font-size: .875rem;
 
         @media #{$small} {
-            margin-top: 1rem;
+            margin-top: .5rem;
             width: 100%;
             order: 100;
         }
diff --git a/src/views/splash/feature/top-banner.scss b/src/views/splash/feature/top-banner.scss
index b80bab3fc..c3ca9cf91 100644
--- a/src/views/splash/feature/top-banner.scss
+++ b/src/views/splash/feature/top-banner.scss
@@ -74,7 +74,7 @@
         background-color: $ui-dark-orange;
         padding: 1rem 1.5rem;
         font-size: 1rem;
-        
+
         &:before {
             display: inline-block;
             margin-right: .5rem;
@@ -106,10 +106,10 @@
     }
 }
 
-@media only screen and (min-width: $tablet) {
+@media only screen and (min-width: $mobileIntermediate) {
     .feature-top-banner {
         margin-bottom: 80px; // double the normal banner 40px for the notch
-        
+
         &:after{
             display: block;
             position: absolute;
@@ -121,7 +121,7 @@
             height: 56px;
             content: "";
         }
-        
+
         .feature-top-container {
             transform: translateX(-15%);
         }
@@ -140,19 +140,19 @@
 @media only screen and (min-width: $mobile) and (max-width: $desktop - 1) {
     .feature-top-banner {
         justify-content: flex-start;
-        
+
         .feature-header {
             text-align: left; // override #view text centering
         }
-        
+
         .feature-banner-images {
             justify-content: flex-end;
         }
-        
+
         .feature-top-container {
             transform: translateX(10%);
         }
-        
+
         .feature-banner-image {
             &.left {
                 display: none;
@@ -161,7 +161,7 @@
     }
 }
 
-@media only screen and (min-width: $tablet) 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: $tablet - 1) {
+@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) {
     .feature-top-banner {
         .feature-banner-image {
             &.right {
@@ -191,7 +191,7 @@
     .feature-top-banner {
         overflow: hidden;
         min-height: 32rem;
-        
+
         .feature-top-container {
             right: 0;
             left: 0;
@@ -200,19 +200,19 @@
             justify-content: flex-start;
             align-items: center;
         }
-        
+
         .feature-header {
             margin: 2rem 0;
             text-align: center;
         }
-        
+
         .feature-banner-image {
             &.right {
                 margin-right: 0;
                 margin-bottom: -4rem;
                 width: 100%;
             }
-        
+
             &.left {
                 margin-bottom: .5rem;
                 display: block;
@@ -221,4 +221,3 @@
         }
     }
 }
-
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 ffa865546..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: $tablet - 1;
+        width: $mobileIntermediate - 1;
     }
 }
 
diff --git a/src/views/wedo2-legacy/wedo2.scss b/src/views/wedo2-legacy/wedo2.scss
index 56c80034d..103ae63bc 100644
--- a/src/views/wedo2-legacy/wedo2.scss
+++ b/src/views/wedo2-legacy/wedo2.scss
@@ -59,7 +59,7 @@
                 width: 100%;
             }
         }
-    } 
+    }
 
     section {
         margin-bottom: 50px;
@@ -72,7 +72,7 @@
         display: flex;
         justify-content: space-between;
 
-        .column { 
+        .column {
             margin: 15px;
             max-width: $cols4;
 
@@ -106,7 +106,7 @@
         margin: 0 auto;
         max-width: $cols9;
         justify-content: space-between;
-    } 
+    }
 
     .project-card {
         transition: transform .25s ease;
@@ -132,7 +132,7 @@
         &:hover {
             transform: scale(1.1, 1.1);
             transition: transform .25s ease;
-            cursor: pointer; 
+            cursor: pointer;
 
             p {
                 color: $ui-blue-dark;
@@ -162,7 +162,7 @@
             margin: 0 auto;
             width: calc(100% - 40px);
         }
-        
+
         .top-banner {
             text-align: center;
 
@@ -226,7 +226,7 @@
 
         .inner {
             margin: 0 auto;
-            width: $tablet;
+            width: $mobileIntermediate;
         }
     }
 }