diff options
| author | Fred Carlsen <fred@sjelfull.no> | 2018-12-13 23:03:03 +0800 |
|---|---|---|
| committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-13 23:03:03 +0800 |
| commit | bfc8a3ccee5379302154e52621b0ce565951a102 (patch) | |
| tree | 5a2e02295db6a0a94a4cca93386706a030d0ea88 /packages | |
| parent | daf334a5881cb32ea5223558833497101a32aea3 (diff) | |
| download | dexon-0x-contracts-bfc8a3ccee5379302154e52621b0ce565951a102.tar.gz dexon-0x-contracts-bfc8a3ccee5379302154e52621b0ce565951a102.tar.zst dexon-0x-contracts-bfc8a3ccee5379302154e52621b0ce565951a102.zip | |
Tweak slides on mobile
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/slider/slider.tsx | 25 |
1 files changed, 20 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/slider/slider.tsx b/packages/website/ts/@next/components/slider/slider.tsx index bf1edf039..6335af7c1 100644 --- a/packages/website/ts/@next/components/slider/slider.tsx +++ b/packages/website/ts/@next/components/slider/slider.tsx @@ -70,6 +70,12 @@ const StyledSlider = styled.div` touch-action: pan-y; -webkit-tap-highlight-color: transparent; outline: none; + + @media (max-width: 500px) { + overflow: hidden; + margin-left: -20px; + width: calc(100vw - 20px); + } } .flickity-viewport { @@ -132,18 +138,27 @@ const StyledSlide = styled.div` opacity: 0.3; transition: opacity .40s ease-in-out; + & + & { + margin-left: 30px; + } + + @media (max-width: 1200px) { + width: 100%; + } + @media (max-width: 500px) { - width: calc(100vw - 10px - 32px); + //width: calc(100vw - 10px - 32px); + width: calc(100vw - 10px - 30px); height: 450px; + + & + & { + margin-left: 10px; + } } &.is-selected { opacity: 1; } - - & + & { - margin-left: 30px; - } `; const SlideHead = styled.div` |