From ee0a226c43bc01044bc99fd8f51bd439bcd125f4 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Tue, 18 Dec 2018 14:04:44 +0100
Subject: Mobile tweaks

---
 packages/website/ts/@next/components/hero.tsx            | 15 +++++++++++++++
 .../ts/@next/components/sections/landing/about.tsx       | 16 +++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

(limited to 'packages/website')

diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
index 46e2ca6d9..6a781f923 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -117,4 +117,19 @@ const ButtonWrap = styled.div`
     > *:nth-child(2) {
         ${addFadeInAnimation('0.6s', '0.4s')}
     }
+
+    @media (max-width: 500px) {
+        flex-direction: column;
+        justify-content: center;
+
+        * {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+
+        * + * {
+            margin-left: 0;
+            margin-top: 12px;
+        }
+    }
 `;
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index bf2577581..87a0fe562 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -26,13 +26,14 @@ export const SectionLandingAbout = () => (
             instruments to assets that could have never existed before.
         </Paragraph>
 
-        <Button href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}>
+        <DeveloperLink href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}>
             Discover how developers use 0x
-        </Button>
+        </DeveloperLink>
 
         <hr
             style={{
-                width: '340px',
+                width: '100%',
+                maxWidth: '340px',
                 borderColor: '#3C4746',
                 margin: '60px auto',
             }}
@@ -55,6 +56,15 @@ const Figure = (props: FigureProps) => (
     </Column>
 );
 
+const DeveloperLink = styled(Button)`
+        @media (max-width: 500px) {
+            && {
+                white-space: pre-wrap;
+                line-height: 1.3;
+            }
+    }
+`;
+
 const FigureValue = styled.dt`
     font-size: 50px;
     font-weight: 300;
-- 
cgit v1.2.3