style(website): mobile hero index and examples

website/src/components/Page/Example.js

@@ -8,8 +8,10 @@ import useExamplePages from 'hooks/useExamplePages';
 
 const Wrapper = styled(Flex)`
   border-top: 1px solid ${(p) => p.theme.colors.silverLighten30};
-  height: 100%;
   flex-grow: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
 `;
 
 export default ({ children, title, slug }) => {

website/src/components/Page/index.js

@@ -23,6 +23,7 @@ const PageWrapper = styled(Flex)`
 
 const PageContent = styled(Box)`
   flex: 1 0 auto;
+  position: relative;
 `;
 
 const Page = ({

website/src/pages/index.js

@@ -17,7 +17,7 @@ import FlowB from 'components/TeaserFlow/B';
 import FlowC from 'components/TeaserFlow/C';
 import { Paragraph, H1, H4 } from 'components/Typo';
 import { baseColors } from 'themes';
-import { getThemeColor } from 'utils/css-utils';
+import { getThemeColor, device } from 'utils/css-utils';
 
 const metaTags = {
   title: 'React Flow',
@@ -111,8 +111,11 @@ const WorkButton = styled(Button)`
 const CenterHeadline = styled(CenterContent)`
   display: flex;
   flex-direction: column;
-  justify-content: center;
   height: 100%;
+
+  @media ${device.tablet} {
+    justify-content: center;
+  }
 `;
 
 const Home = () => {