diff --git a/src/components/base/Button.jsx b/src/components/base/Button.jsx index 097f0cf..58a242b 100644 --- a/src/components/base/Button.jsx +++ b/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' } diff --git a/src/components/projects/ListProjects.jsx b/src/components/projects/ListProjects.jsx index e09d35b..030a167 100644 --- a/src/components/projects/ListProjects.jsx +++ b/src/components/projects/ListProjects.jsx @@ -114,7 +114,7 @@ function TableCards({ profiles, classes }) { {`By ${creator}`} - Read more + Read more ) diff --git a/src/components/projects/ProjectsHeader.jsx b/src/components/projects/ProjectsHeader.jsx index 9d0e070..ccf917a 100644 --- a/src/components/projects/ProjectsHeader.jsx +++ b/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', diff --git a/src/components/projects/styles/ListProjects.js b/src/components/projects/styles/ListProjects.js index 89791ea..993f961 100644 --- a/src/components/projects/styles/ListProjects.js +++ b/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',