diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 22:06:37 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 22:06:37 +0800 |
| commit | d8e03b87d6e3152878902348f613ad006697c224 (patch) | |
| tree | d86e21d085b272120265b5bfdae6d17c8c6a8b08 /packages/website/ts/@next | |
| parent | f06c17cccca46298a4b2780c1963165c5020c878 (diff) | |
| download | dexon-sol-tools-d8e03b87d6e3152878902348f613ad006697c224.tar dexon-sol-tools-d8e03b87d6e3152878902348f613ad006697c224.tar.gz dexon-sol-tools-d8e03b87d6e3152878902348f613ad006697c224.tar.bz2 dexon-sol-tools-d8e03b87d6e3152878902348f613ad006697c224.tar.lz dexon-sol-tools-d8e03b87d6e3152878902348f613ad006697c224.tar.xz dexon-sol-tools-d8e03b87d6e3152878902348f613ad006697c224.tar.zst dexon-sol-tools-d8e03b87d6e3152878902348f613ad006697c224.zip | |
Team page grid responsive style
Diffstat (limited to 'packages/website/ts/@next')
| -rw-r--r-- | packages/website/ts/@next/components/newLayout.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/about/team.tsx | 8 |
2 files changed, 12 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index 21f4271bd..cc1f725ba 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -98,6 +98,10 @@ export const WrapGrid = styled(Wrap)<WrapGridProps>` display: flex; flex-wrap: ${props => props.isWrapped && `wrap`}; justify-content: ${props => props.isCentered ? `center` : 'space-between'}; + + @media (max-width: 768px) { + width: 100%; + } `; Section.defaultProps = { diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx index 821fa19a0..26813a01e 100644 --- a/packages/website/ts/@next/pages/about/team.tsx +++ b/packages/website/ts/@next/pages/about/team.tsx @@ -240,4 +240,12 @@ const StyledMember = styled.div` object-fit: contain; margin-bottom: 10px; } + + @media (max-width: 900px) { + width: calc(33.3333% - 30px); + } + + @media (max-width: 600px) { + width: calc(50% - 15px); + } `; |