VotingCardGroup: add responsive behaviour

aragon · Jan 17, 2019 · 65ad44e · 65ad44e
1 parent 2262022
commit 65ad44e
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/apps/voting/app/src/components/VotingCard/VotingCardGroup.js b/apps/voting/app/src/components/VotingCard/VotingCardGroup.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Badge, Text, unselectable } from '@aragon/ui'
+import { Badge, Text, unselectable, breakpoint } from '@aragon/ui'
 
 const VotingCardGroup = ({ title, count, children }) => (
   <Main>
@@ -24,9 +24,16 @@ const Main = styled.section`
 
 const Grid = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  grid-template-columns: 1fr;
   grid-auto-rows: 270px;
   grid-gap: 30px;
+
+  ${breakpoint(
+    'medium',
+    `
+      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+     `,
+  )};
 `
 
 const Title = styled.h1`