diff --git a/packages/react-components/src/WakuPolling/Poll.tsx b/packages/react-components/src/WakuPolling/Poll.tsx index 494308f..d602b29 100644 --- a/packages/react-components/src/WakuPolling/Poll.tsx +++ b/packages/react-components/src/WakuPolling/Poll.tsx @@ -94,8 +94,11 @@ const PollWrapper = styled.div` box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); border-radius: 6px; background-color: #fbfbfe; - margin-bottom: 24px; padding: 32px; + + @media (max-width: 768px) { + padding: 24px; + } ` const PollTitle = styled.div` diff --git a/packages/react-components/src/WakuPolling/PollList.tsx b/packages/react-components/src/WakuPolling/PollList.tsx index 309483a..f170b86 100644 --- a/packages/react-components/src/WakuPolling/PollList.tsx +++ b/packages/react-components/src/WakuPolling/PollList.tsx @@ -53,13 +53,26 @@ export function PollList({ wakuVoting, signer }: PollListProps) { ) } + const PollListWrapper = styled.div` display: flex; + flex-wrap: wrap; width: 100%; + gap: 24px; + align-items: flex-start; + + @media (max-width: 768px) { + gap: 16px; + justify-content: center; + } ` const ColumnWrapper = styled.div` display: flex; flex-direction: column; - margin-right: 25px; + gap: 24px; + + @media (max-width: 768px) { + gap: 16px; + } ` diff --git a/packages/react-components/src/WakuPolling/index.tsx b/packages/react-components/src/WakuPolling/index.tsx index ddb0a30..cea9071 100644 --- a/packages/react-components/src/WakuPolling/index.tsx +++ b/packages/react-components/src/WakuPolling/index.tsx @@ -97,6 +97,10 @@ const Wrapper = styled.div` padding: 150px 32px 50px; width: 100%; + @media (max-width: 1146px) { + max-width: 780px; + } + @media (max-width: 600px) { padding: 132px 16px 32px; }