From b9edb4abc809ff6c8582e556c0b40ee81e3d207b Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Fri, 25 Jan 2019 12:44:35 +0100
Subject: [PATCH] fix device connect wrapper on landing page

---
 .../Landing/components/ConnectDevice/index.js | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/views/Landing/components/ConnectDevice/index.js b/src/views/Landing/components/ConnectDevice/index.js
index 7e374544..c07a83e4 100644
--- a/src/views/Landing/components/ConnectDevice/index.js
+++ b/src/views/Landing/components/ConnectDevice/index.js
@@ -8,7 +8,7 @@ import Button from 'components/Button';
 import { H2 } from 'components/Heading';
 import { PULSATE } from 'config/animations';
 import colors from 'config/colors';
-import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
+import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
 import CaseImage from 'images/macbook.png';
 import Link from 'components/Link';
 
@@ -28,21 +28,35 @@ const Title = styled.div`
 
 const Wrapper = styled.div`
     display: flex;
-    justify-content: space-around;
     align-items: center;
     margin: 0 auto;
     padding: 36px 0;
+    justify-content: center;
+
+    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
+        align-content: center;
+        flex-direction: column;
+    }
 `;
 
 const ConnectTrezorWrapper = styled.div`
     position: relative;
     top: 1px;
+    margin: 10px 10px 0px 10px;
     animation: ${PULSATE} 1.3s ease-out infinite;
     color: ${colors.GREEN_PRIMARY};
     font-size: ${FONT_SIZE.BIG};
     font-weight: ${FONT_WEIGHT.MEDIUM};
 `;
 
+const StyledP = styled(P)`
+    margin: 10px 10px 0px 10px;
+`;
+
+const StyledButton = styled(Button)`
+    margin: 10px 10px 0px 10px;
+`;
+
 const Image = styled.img`
     width: 100%;
     max-width: 777px;
@@ -128,10 +142,10 @@ class ConnectDevice extends PureComponent<Props> {
                     </ConnectTrezorWrapper>
                     {this.props.showWebUsb && !this.props.showDisconnect && (
                         <React.Fragment>
-                            <P>and</P>
-                            <Button isWebUsb>
+                            <StyledP>and</StyledP>
+                            <StyledButton isWebUsb>
                                 Check for devices
-                            </Button>
+                            </StyledButton>
                         </React.Fragment>
                     )}
                 </Wrapper>