From ab24dcc29098c7b0c65c0e19be89a15bec3426af Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 30 Nov 2018 09:56:01 +0100
Subject: Hide trade button on mobile

---
 packages/website/ts/@next/components/header.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 0d4679df6..9b80ec167 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -11,10 +11,10 @@ interface HeaderInterface {
 
 const StyledHeader = styled.header`
     display: flex;
+    flex-wrap: wrap;
     text-align: center;
     align-items: center;
     justify-content: space-between;
-    padding: 1.764705882rem 0;
     padding: 1.666666667rem 0;
 `;
 
@@ -40,6 +40,12 @@ const Link = styled.a`
     }
 `;
 
+const TradeButton = styled(Button)`
+    @media (max-width: 999px) {
+        display: none;
+    }
+`;
+
 const links = [
     { url: '#', text: 'Why 0x' },
     { url: '#', text: 'Products' },
@@ -55,7 +61,7 @@ export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
             <Links>
                 {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
             </Links>
-            <Button href="#">Trade on 0x</Button>
+            <TradeButton href="#">Trade on 0x</TradeButton>
         </StyledHeader>
     </Container>
 );
-- 
cgit v1.2.3