Fixes fullwidth sections

5 files changed, 11 insertions, 16 deletions

diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index f4cf19e29..1ac9fccfc 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -80,6 +80,8 @@ export const WrapSticky = styled.div<WrapProps>`
 `;
 
 const SectionBase = styled.section<SectionProps>`
+    width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
+    max-width: 1500px;
     margin: 0 auto;
     padding: ${props => props.isPadded && '120px 0'};
     background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
@@ -92,7 +94,6 @@ const SectionBase = styled.section<SectionProps>`
 `;
 
 const Wrap = styled(FlexWrap)<WrapProps>`
-    width: calc(100% - 60px);
     max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
     text-align: ${props => props.isTextCentered && 'center'};
     margin: 0 auto;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index b90b4070e..b387c2418 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -15,8 +15,8 @@ interface Props {
 export const SectionLandingCta = (props: Props) => (
     <Section
         isPadded={false}
-        isFullWidth={true}
         isFlex={true}
+        maxWidth="auto"
         flexBreakpoint="900px"
     >
         <BlockIconLink
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index abbd27845..eb2569f3d 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -69,21 +69,12 @@ export const SiteWrap: React.StatelessComponent<Props> = props => {
                 <>
                     <GlobalStyles />
                     <Header />
-                    <Main>
+                    <main>
                         {children}
-                    </Main>
+                    </main>
                     <Footer/>
                 </>
             </ThemeProvider>
         </>
     );
 };
-
-export const Main = styled.main`
-    max-width: 1500px;
-    margin: 0 auto;
-
-    @media (min-width: 768px) {
-        width: calc(100% - 60px);
-    }
-`;
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index e1725b185..878818940 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -68,7 +68,7 @@ export const Next0xInstant = () => (
             actions={<Button href="#">Get Started</Button>}
         />
 
-        <Section>
+        <Section isFullWidth={true}>
           <MarqueeWrap>
               <div>
                   <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 14ca3ab6f..11b8928d9 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -125,7 +125,7 @@ export class NextWhy extends React.PureComponent {
                     />
                 </Section>
 
-              <Section maxWidth="1170px" isFlex={true}>
+              <Section maxWidth="1170px" isFlex={true} isFullWidth={true}>
                   <Column>
                       <NavStickyWrap offsetTop="130px">
                           <ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
@@ -135,7 +135,7 @@ export class NextWhy extends React.PureComponent {
                   </Column>
 
                     <Column width="55%" maxWidth="826px">
-                        <Column width="100%" maxWidth="560px">
+                        <Column width="100%" maxWidth="560px" padding="0 30px 0 0">
                             <SectionWrap id="benefits">
                                 <Heading size="medium">What 0x offers</Heading>
 
@@ -225,6 +225,9 @@ const SectionWrap = styled.div`
 `;
 
 const NavStickyWrap = styled(WrapSticky)`
+    padding-left: 60px;
+    z-index: 9999;
+
     @media (max-width: 768px) {
         display: none;
     }