diff options
Diffstat (limited to 'packages/website/ts/@next/components/layout.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 18 |
1 files changed, 16 insertions, 2 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index d30b7a9d1..1fa145368 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -68,9 +68,13 @@ const COLUMN_WIDTHS: ColumnWidths = { export const Main = styled.main` border: 1px dotted rgba(0, 0, 255, 0.3); - width: calc(100% - 60px); + width: calc(100% - 0); max-width: ${MAX_WIDTH}px; margin: 0 auto; + + @media (min-width: ${BREAKPOINTS.mobile}) { + width: calc(100% - 60px); + } `; // We can also turn Section into a stateless comp, @@ -91,7 +95,7 @@ export const Section = styled.section<SectionProps>` } @media (max-width: ${BREAKPOINTS.mobile}) { - padding: 30px; + padding: 20px; } `; @@ -100,6 +104,10 @@ const WrapBase = styled.div<WrapProps>` padding: ${props => props.padding && getCSSPadding(props.padding)}; background-color: ${props => props.bgColor}; margin: 0 auto; + + @media (max-width: ${BREAKPOINTS.mobile}) { + padding: 20px 0; + } `; export const Wrap = styled(WrapBase)` @@ -132,6 +140,12 @@ export const Column = styled.div<ColumnProps>` @media (min-width: ${BREAKPOINTS.mobile}) { width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; } + + @media (max-width: ${BREAKPOINTS.mobile}) { + padding-left: 0; + padding-right: 0; + margin-bottom: var(--gutterMobile, 20px); + } `; WrapGrid.defaultProps = { |