fixed mobile padding of navigation, added media queries for spacing of feature blocks

website/src/components/CodeBlock/Mdx.js

@@ -18,7 +18,7 @@ export default ({ children, className = 'javascript', language }) => {
           style={{
             ...style,
             overflowX: 'auto',
-            padding: 30,
+            padding: 16,
             borderRadius: 4,
             margin: '20px 0 20px 0',
             fontSize: 14,

website/src/components/Header/index.js

@@ -14,7 +14,7 @@ import ReactFlowLogo from 'assets/images/react-flow-logo.svg';
 const Centered = styled(Flex)`
   justify-content: space-between;
   align-items: center;
-  padding: ${getThemeSpacePx(4)};
+  padding: 24px 16px;
 `;
 
 const Wrapper = styled.nav`

website/src/components/TeaserFlow/index.js

@@ -25,7 +25,7 @@ const ReactFlowWrapper = styled(Box)`
   background: ${(p) => (p.isDark ? baseColors.violet : 'white')};
   border-radius: 10px;
   order: 2;
-  margin: 30px 0;
+  margin: ${getThemeSpacePx(4)} ${getThemeSpacePx(0)};
   border: solid rgba(26, 25, 43, 0.054) 1.5px;
 
   box-shadow: 0 2.8px 2.2px rgba(26, 25, 43, 0.014),
@@ -37,6 +37,10 @@ const ReactFlowWrapper = styled(Box)`
     order: ${(p) => p.order};
   }
 
+  @media ${device.mobile} {
+    margin-top: ${getThemeSpacePx(3)};
+  }
+
   .react-flow__controls {
     opacity: ${(p) => (p.isDark ? 0.5 : 1)};
   }
@@ -48,6 +52,10 @@ const DocsLink = styled(Link)`
   align-items: center;
   margin-top: 16px;
 
+  @media ${device.mobile} {
+    margin-top: ${getThemeSpacePx(0)};
+  }
+
   svg {
     transform: translateX(0px);
     transition: all 0.125s ease-in-out;
@@ -68,6 +76,10 @@ const DescriptionWrapper = styled(Box)`
   @media ${device.tablet} {
     order: ${(p) => p.order};
   }
+
+  @media ${device.mobile} {
+    margin-bottom: ${getThemeSpacePx(0)};
+  }
 `;
 
 const Description = ({ title, description }) => (