3 files changed, 17 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index b2ce9eb73..fa830f42c 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -30,6 +30,10 @@ export const Button = styled.button<ButtonInterface>`
     text-align: center;
     font-size: 18px;
     text-decoration: none;
+
+    @media (max-width: 768px) {
+        padding: ${props => !props.isNoPadding && '6% 10%'};
+    }
 `;
 
 export const Link = (props: ButtonInterface) => {
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 9f147e3fb..96658a4b2 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -14,6 +14,15 @@ interface LogoInterface {
 // to pass props down into the styled icon?
 const StyledLogo = styled.div`
     text-align: left;
+    position: relative;
+
+    @media (max-width: 768px) {
+        z-index: 2;
+
+        svg {
+            width: 60px;
+        }
+    }
 `;
 
 const Icon = styled(LogoIcon)`
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 3fcd5c776..8584a093c 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -27,6 +27,10 @@ const StyledHeading = styled.h1<HeadingProps>`
     margin-bottom: ${props => !props.isNoMargin && '30px'};
     text-align: ${props => props.isCentered && 'center'};
     font-weight: 300;
+
+    @media (max-width: 768px) {
+        text-align: center;
+    }
 `;
 
 export const Heading: React.StatelessComponent<HeadingProps> = props => {