Fix width artifacts for 1280px width

Ives van Hoorne · Ives van Hoorne · commit 7b21ae53b7f8 · 2017-11-15T19:18:11.000+01:00
diff --git a/src/homepage/src/screens/home/Animation/Title.js b/src/homepage/src/screens/home/Animation/Title.js
@@ -102,11 +102,11 @@ const Secondary = styled.div`
 
 export default ({ template }) => (
   <Container>
-    <Title>
+    <Title title="CodeSandbox">
       <Secondary style={{ color: template.color() }}>Code</Secondary>
       <Primary>Sandbox</Primary>
     </Title>
-    <SubTitle>
+    <SubTitle title="The online editor tailored for web applications">
       The online code editor for&nbsp;
       <RollingText updateCheck={template.name} width="12rem">
         <span style={{ color: template.color() }}>{template.niceName}</span>
diff --git a/src/homepage/src/screens/home/Frameworks/index.js b/src/homepage/src/screens/home/Frameworks/index.js
@@ -40,6 +40,11 @@ const Container = styled.div`
   flex-direction: row;
   height: 255px;
 
+  ${media.tablet`
+    margin-top: 1rem;
+    height: 320px;
+  `};
+
   ${media.phone`
     margin-top: 1rem;
     height: 280px;
diff --git a/src/homepage/src/utils/media.js b/src/homepage/src/utils/media.js
@@ -8,7 +8,7 @@ export default {
   `,
 
   phone: (...args) => css`
-    @media (max-width: 600px) {
+    @media (max-width: 660px) {
       ${css(...args)};
     }
   `,
