diff options
| -rw-r--r-- | src/pages/HomePage/HomePage.tsx | 4 | ||||
| -rw-r--r-- | src/pages/Page.tsx | 5 |
2 files changed, 6 insertions, 3 deletions
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 8995630..35130d8 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -61,7 +61,7 @@ const HomePage: React.FC = () => { return ( <Grid container spacing={4}> - <Grid item xs={4}> + <Grid item xs={12} md={4}> <Grid container direction="column" spacing={1} alignItems="center"> <Grid item> <img src={`${process.env.PUBLIC_URL}/which-logo-512.png`} alt="logo" className={classes.logo} /> @@ -76,7 +76,7 @@ const HomePage: React.FC = () => { </Grid> </Grid> </Grid> - <Grid item xs={5}> + <Grid item xs={12} md={5}> <Grid container direction="column" spacing={6}> <Grid item> <Typography variant="h4"> Which one to choose? </Typography> diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 24487f3..c2b422e 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { SnackbarProvider } from 'notistack'; +import { isMobile } from 'react-device-detect'; + import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; import AuthPage from './AuthPage/AuthPage'; @@ -8,9 +10,10 @@ import HomePage from './HomePage/HomePage'; import NotificationsPage from './NotificationsPage/NotificationsPage'; import { useNavigate } from '../hooks/useNavigate'; + const useStyles = makeStyles(theme => ({ root: { - margin: theme.spacing(15, 5, 5, 8) + margin: isMobile ? theme.spacing(5, 2) : theme.spacing(15, 5, 5, 8) } })); |