hero spacing adjustment on small screen

1 files changed, 12 insertions, 0 deletions

diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 5ba469fca..f52ce5bc9 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
 import { withContext, Props } from './withContext';
 import Button from './Button';
 import { Beta } from './Typography';
@@ -23,6 +24,8 @@ const StyledHero = styled.section`
     margin: 0 auto;
     padding-top: 9.375rem;
     padding-bottom: 2rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
     max-width: 590px;
     min-height: min-content;
     max-height: 37.5rem;
@@ -33,10 +36,19 @@ const Subtitle = styled.h2`
     font-size: 3.75rem;
     line-height: 1.16;
     margin-bottom: 1.5rem;
+
+    ${media.small`
+        font-size: 2.25rem;
+        line-height: 1.1;
+        margin-bottom: 1.375rem;
+    `};
 `;
 
 const Tagline = styled(Beta)`
     margin-bottom: 2rem;
+    ${media.small`
+        margin-bottom: 1.25rem;
+    `};
 `;
 
 export default withContext(Hero);