From 9b794c00eab124b499ab6c8c9ec1cccc8e09546b Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 09:58:08 +0100 Subject: Quick test responsive cols --- packages/website/ts/@next/components/layout.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index c25981ed6..81ae43db7 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -77,12 +77,18 @@ export const Wrap = styled.div` max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; background-color: ${props => props.bgColor}; margin: 0 auto; - display: flex; - justify-content: space-between; + + @media (min-width: 768px) { + display: flex; + justify-content: space-between; + } `; export const Column = styled.div` - width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; padding: ${props => !props.noPadding && '30px'}; border: 1px dotted rgba(255, 0, 0, 0.3); + + @media (min-width: 768px) { + width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; + } `; -- cgit