Make website mobile friendly

packages/website/ts/components/tabbed_code_demo.tsx

@@ -19,11 +19,14 @@ interface TabProps {
     isActive: boolean;
 }
 
-const TabbedWrapper = styled.div`
+export const TabbedWrapper = styled.div`
     background-color: #0c2320;
     width: 100%;
     height: 586px;
     margin-left: 50px;
+    @media (max-width: 768px) {
+        display: none;
+    }
 `;
 
 const Tab = styled.div<TabProps>`

packages/website/ts/pages/cfl.tsx

@@ -32,6 +32,17 @@ const DeveloperLink = styled(Button)`
     }
 `;
 
+const DeFiHeading = styled(Heading)`
+    text-align: center;
+    @media (min-width: 768px) {
+        padding-bottom: 80px;
+    }
+    @media (max-width: 768px) {
+        font-size: 34px !important;
+        padding: 15px 0px;
+    }
+`;
+
 const useCasesData = [
     {
         title: 'DeFi Lending and Margin Trading Platforms',
@@ -81,7 +92,8 @@ export class CFL extends React.Component<Props> {
                     actions={
                         <Button href={constants.CFL_DOCS} isInline={true}>
                             Get Started
-                        </Button>}
+                        </Button>
+                    }
                 />
                 <Section bgColor="dark" isTextCentered={true}>
                     <InlineIconWrap>
@@ -103,9 +115,7 @@ export class CFL extends React.Component<Props> {
                     <CodeStepper />
                 </Section>
                 <Section>
-                    <FlexWrap justifyContent="center" padding="0px 0px 80px">
-                        <Heading size="medium">Use Cases in DeFi</Heading>
-                    </FlexWrap>
+                    <DeFiHeading size="medium">Use Cases in DeFi</DeFiHeading>
                     {useCasesData.map(useCase => (
                         <Definition
                             key={useCase.title}

packages/website/ts/pages/cfl/code_stepper.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { Definition, DefinitionProps } from 'ts/components/definition';
-import { CodeTab, TabbedCodeDemo } from 'ts/components/tabbed_code_demo';
+import { CodeTab, TabbedCodeDemo, TabbedWrapper } from 'ts/components/tabbed_code_demo';
 
 const StepperContainer = styled.div`
     display: flex;
@@ -14,16 +14,23 @@ interface InteractiveDefinitionProps extends DefinitionProps {
 }
 
 const InteractiveDefinition = styled(Definition)<InteractiveDefinitionProps>`
-    padding: 20px;
-    background-color: ${props => (props.isSelected ? '#0D1413' : '')};
-    border-left: ${props => (props.isSelected ? '3px solid #00AE99' : '3px solid rgba(0,0,0,0)')};
-    width: 600px;
-    p {
-        margin-bottom: 0px;
+    @media (min-width: 768px) {
+        padding: 20px;
+        background-color: ${props => (props.isSelected ? '#0D1413' : '')};
+        border-left: ${props => (props.isSelected ? '3px solid #00AE99' : '3px solid rgba(0,0,0,0)')};
+        width: 600px;
+        p {
+            margin-bottom: 0px;
+        }
+        &:hover {
+            background-color: #0d1413;
+            cursor: pointer;
+        }
     }
-    &:hover {
-        background-color: #0d1413;
-        cursor: pointer;
+
+    @media (max-width: 768px) {
+        text-align: center;
+        margin-top: 60px;
     }
 `;
 
@@ -124,6 +131,7 @@ export class CodeStepper extends React.Component<CodeStepperProps, CodeStepperSt
                                 titleSize="small"
                                 description={item.description}
                                 isWithMargin={false}
+                                isCentered={true}
                                 isSelected={index === selectedSideTabIndex}
                             />
                         </div>