diff --git a/website/src/components/Page/Example.js b/website/src/components/Page/Example.js index 04e9db8f..8b8751d8 100644 --- a/website/src/components/Page/Example.js +++ b/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 }) => { diff --git a/website/src/components/Page/index.js b/website/src/components/Page/index.js index 7ab5ba92..23129c3c 100644 --- a/website/src/components/Page/index.js +++ b/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 = ({ diff --git a/website/src/pages/index.js b/website/src/pages/index.js index b78aadd0..ebd7f329 100644 --- a/website/src/pages/index.js +++ b/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 = () => {