From 9b794c00eab124b499ab6c8c9ec1cccc8e09546b Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
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/website/ts/@next/components/layout.tsx')

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%'};
+  }
 `;
-- 
cgit