Mobile optimize translated landing page

2 files changed, 40 insertions, 10 deletions

diff --git a/packages/website/public/css/basscss_responsive_custom.css b/packages/website/public/css/basscss_responsive_custom.css
index c2e802125..5f8bd9117 100644
--- a/packages/website/public/css/basscss_responsive_custom.css
+++ b/packages/website/public/css/basscss_responsive_custom.css
@@ -4,12 +4,21 @@
     .sm-center {
         text-align: center;
     }
+    .sm-align-middle {
+        vertical-align: middle;
+    }
+    .sm-align-top {
+        vertical-align: top;
+    }
     .sm-left-align {
         text-align: left;
     }
     .sm-right-align {
         text-align: right;
     }
+    .sm-table-cell {
+        display: table-cell;
+    }
     .sm-mx-auto {
         margin-left: auto;
         margin-right: auto;
@@ -23,12 +32,21 @@
     .md-center {
         text-align: center;
     }
+    .md-align-middle {
+        vertical-align: middle;
+    }
+    .md-align-top {
+        vertical-align: top;
+    }
     .md-left-align {
         text-align: left;
     }
     .md-right-align {
         text-align: right;
     }
+    .md-table-cell {
+        display: table-cell;
+    }
     .md-mx-auto {
         margin-left: auto;
         margin-right: auto;
@@ -42,12 +60,21 @@
     .lg-center {
         text-align: center;
     }
+    .lg-align-middle {
+        vertical-align: middle;
+    }
+    .lg-align-top {
+        vertical-align: top;
+    }
     .lg-left-align {
         text-align: left;
     }
     .lg-right-align {
         text-align: right;
     }
+    .lg-table-cell {
+        display: table-cell;
+    }
     .lg-mx-auto {
         margin-left: auto;
         margin-right: auto;
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index a7f90f169..5a231b99d 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -218,6 +218,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     }
     private _renderHero() {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+        const isMediumScreen = this.state.screenWidth === ScreenWidths.Md;
         const buttonLabelStyle: React.CSSProperties = {
             textTransform: 'none',
             fontSize: isSmallScreen ? 12 : 14,
@@ -239,10 +240,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                         </div>
                         <div className={left} style={{ color: colors.white, height: 390, lineHeight: '390px' }}>
                             <div
-                                className="inline-block"
+                                className="inline-block lg-align-middle md-align-middle sm-align-top"
                                 style={{
                                     paddingLeft: isSmallScreen ? 0 : 12,
-                                    verticalAlign: 'middle',
                                     lineHeight: '36px',
                                 }}
                             >
@@ -266,7 +266,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                 >
                                     {this.props.translate.get(Key.TopTagline)}
                                 </div>
-                                <div className="pt3 clearfix sm-mx-auto" style={{ maxWidth: 346 }}>
+                                <div className="pt3 clearfix sm-mx-auto" style={{ maxWidth: 389 }}>
                                     <div className="lg-pr2 md-pr2 col col-6 sm-center">
                                         <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
                                             <RaisedButton
@@ -381,8 +381,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                         style={{ color: colors.darkestGrey, height: 364, lineHeight: '364px' }}
                     >
                         <div
-                            className="mx-auto inline-block"
-                            style={{ maxWidth: 385, lineHeight: '44px', verticalAlign: 'middle', textAlign: 'left' }}
+                            className="mx-auto inline-block lg-align-middle md-align-middle sm-align-top"
+                            style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'left' }}
                         >
                             <div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
                                 {this.props.translate.get(Key.TokenizedSectionHeader, Deco.Cap)}
@@ -418,7 +418,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                             lineHeight: '430px',
                         }}
                     >
-                        <div className="inline-block" style={{ verticalAlign: 'middle', lineHeight: '43px' }}>
+                        <div
+                            className="inline-block lg-align-middle md-align-middle sm-align-top"
+                            style={{ lineHeight: '43px' }}
+                        >
                             <div
                                 className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center"
                                 style={{ fontFamily: 'Roboto Mono' }}
@@ -563,7 +566,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const boxStyle: React.CSSProperties = {
             maxWidth: 253,
-            height: 392,
+            height: 402,
             backgroundColor: colors.grey50,
             borderRadius: 5,
             padding: '10px 24px 24px',
@@ -733,7 +736,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             lineHeight: '33px',
             height: 49,
         };
-        const callToActionClassNames = 'lg-pr3 md-pr3 lg-right-align md-right-align sm-center sm-px3 h4';
+        const callToActionClassNames =
+            'lg-pr3 md-pr3 lg-right-align md-right-align sm-center sm-px3 h4 lg-table-cell md-table-cell';
         return (
             <div className="clearfix pb4" style={{ backgroundColor: colors.heroGrey }}>
                 <div className="mx-auto max-width-4 pb4 mb3 clearfix center">
@@ -744,12 +748,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                 fontFamily: 'Roboto Mono',
                                 color: colors.white,
                                 lineHeight: isSmallScreen ? 1.7 : 3,
-                                display: 'table-cell',
                             }}
                         >
                             {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)}
                         </div>
-                        <div className="sm-center sm-pt2" style={{ display: 'table-cell' }}>
+                        <div className="sm-center sm-pt2 lg-table-cell md-table-cell">
                             <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
                                 <RaisedButton
                                     style={{ borderRadius: 6, minWidth: 150 }}