feat: make responsive

This commit is contained in:
Ibrahima G. Coulibaly
2024-06-26 00:29:53 +01:00
parent 00beb61d52
commit 21c6b8bc1f
6 changed files with 150 additions and 71 deletions

View File

@@ -23,7 +23,7 @@ export default function Home() {
return (
<Box>
<Box
padding={5}
padding={{ xs: 1, md: 3, lg: 5 }}
display={'flex'}
flexDirection={'column'}
alignItems={'center'}
@@ -33,7 +33,7 @@ export default function Home() {
<Hero />
</Box>
<Divider sx={{ borderColor: theme.palette.primary.main }} />
<Box width={'100%'} mt={3} ml={7} padding={3}>
<Box width={'100%'} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}>
<Typography
fontSize={22}
color={theme.palette.primary.main}
@@ -42,7 +42,7 @@ export default function Home() {
{getToolsByCategory()
.find(({ type }) => type === categoryName)
?.tools?.map((tool) => (
<Grid item xs={12} md={4} key={tool.path}>
<Grid item xs={12} md={6} lg={4} key={tool.path}>
<Stack
sx={{
cursor: 'pointer',