diff options
Diffstat (limited to 'packages/website/ts/@next/components/newLayout.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/newLayout.tsx | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index fc2bae46b..107d96006 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -24,6 +24,7 @@ interface SectionProps extends WrapProps { isPadded?: boolean; isFullWidth?: boolean; isFlex?: boolean; + paddingMobile?: string; flexBreakpoint?: string; maxWidth?: string; bgColor?: 'dark' | 'light' | string; @@ -74,17 +75,24 @@ const SectionBase = styled.section<SectionProps>` margin: 0 auto; padding: ${props => props.isPadded && '120px 0'}; background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor}; + position: relative; + overflow: hidden; @media (max-width: 768px) { - padding: ${props => props.isPadded && '40px 0'}; + padding: ${props => props.isPadded && (props.paddingMobile || '40px 0')}; } `; const Wrap = styled(FlexWrap)<WrapProps>` width: ${props => !props.isFullWidth && 'calc(100% - 60px)'}; max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')}; - margin: 0 auto; text-align: ${props => props.isTextCentered && 'center'}; + margin: 0 auto; + overflow: hidden; + + @media (max-width: 768px) { + width: calc(100% - 60px); + } `; export const WrapGrid = styled(Wrap)<WrapGridProps>` |