make landing page mobile friendly

src/components/base/Button.jsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
     justifyContent: 'space-evenly',
     alignItems: 'center',
     width: '100%',
-    fontSize: '5.4vw',
+    fontSize: '14px',
     [theme.breakpoints.up('md')]: {
       fontSize: '14px'
     }

src/components/projects/ListProjects.jsx

@@ -114,7 +114,7 @@ function TableCards({ profiles, classes }) {
             <Typography className={lightText}>{`By ${creator}`}</Typography>
             <FundingDetail classes={classes} pledgesInfos={pledgesInfos} goal={goal} goalToken={goalToken} cellStyling={classnames(lightText, classes.cardAmount)} />
             <Link to={profileUrl} className={classnames(classes.cardLink, cellStyling, classes.cardMore, classes.paddingNone)}>
-              <Typography className={classnames(lightText, classes.paddingNone)}>Read more</Typography>
+              <Typography className={classnames(classes.paddingNone, classes.green)}>Read more</Typography>
             </Link>
           </Fragment>
         )

src/components/projects/ProjectsHeader.jsx

@@ -10,6 +10,9 @@ import Icon from '../base/icons/IconByName'
 import AssembleFlow from '../image/AssembleFlow'
 
 const useStyles = makeStyles(({
+  breakpoints: {
+    up
+  },
   palette: {
     primary,
     common: { darkGrey }
@@ -27,18 +30,26 @@ const useStyles = makeStyles(({
     fontSize: '20px'
   },
   creatorsCard: {
-    gridColumn: '14 / 24',
+    [up('md')]: {
+      gridColumn: '14 / 24',
+      marginBottom: 0
+    },
+    gridColumn: '1 / 49',
     boxShadow: '0px 15px 29px rgba(0, 34, 51, 0.08)',
     borderRadius: '8px',
     background: '#FFFFFF',
-    padding: '1rem'
+    padding: '1rem',
+    marginBottom: '1rem'
   },
   cardContent: {
     display: 'grid',
     gridTemplateRows: '3.5rem 1.5rem auto 2rem'
   },
   fundersCard: {
-    gridColumn: '26 / 36',
+    [up('md')]: {
+      gridColumn: '26 / 36',
+    },
+    gridColumn: '1 / 49',
     boxShadow: '0px 15px 29px rgba(0, 34, 51, 0.08)',
     borderRadius: '8px',
     background: '#FFFFFF',

src/components/projects/styles/ListProjects.js

@@ -20,7 +20,10 @@ const useStyles = makeStyles(theme => ({
   main: {
     display: 'grid',
     gridTemplateColumns: 'repeat(48, [col] 1fr)',
-    gridTemplateRows: '4rem 4rem auto auto 6rem'
+    gridTemplateRows: '12rem 5rem auto auto 6rem',
+    [theme.breakpoints.up('md')]: {
+      gridTemplateRows: '4rem 4rem auto auto 6rem'
+    }
   },
   title: {
     fontSize: '2rem',