diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 16:58:08 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 16:58:08 +0800 |
| commit | 9b794c00eab124b499ab6c8c9ec1cccc8e09546b (patch) | |
| tree | 3f6488a126663d7e31442ecfcb1f03d502977d61 /packages/website | |
| parent | 03289293c3331735287346d9e1582474c2ee2f49 (diff) | |
| download | dexon-sol-tools-9b794c00eab124b499ab6c8c9ec1cccc8e09546b.tar.gz dexon-sol-tools-9b794c00eab124b499ab6c8c9ec1cccc8e09546b.tar.zst dexon-sol-tools-9b794c00eab124b499ab6c8c9ec1cccc8e09546b.zip | |
Quick test responsive cols
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 12 |
1 files changed, 9 insertions, 3 deletions
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<WrapProps>` 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<ColumnProps>` - 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%'}; + } `; |