casl/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛fix(section): fix section margins on small mobile screens

Browse Source
This commit is contained in:
m-tartari
2026-02-18 12:31:11 +01:00
parent 51023184a3
commit 054da6ae95
1 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/molecules/Section/index.tsx
+27 -16
View File
@@ -19,8 +19,7 @@ const Section: React.FC<SectionProps> = ({ variant = 'primary', imageUrl, imageA
component="section"
sx={{
margin: 0,
padding: 0,
width: '100%',
px: { xs: 1, sm: 2, md: 0 },
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -38,19 +37,23 @@ const Section: React.FC<SectionProps> = ({ variant = 'primary', imageUrl, imageA
sx={[
theme => ({
paddingBottom: 3,
[theme.breakpoints.up('md')]: {
width: '90em',
[theme.breakpoints.only('md')]: {
width: theme.breakpoints.values.md,
maxWidth: 'calc(100% - 2em)',
mx: 'auto',
},
[theme.breakpoints.up('lg')]: {
width: theme.breakpoints.values.lg,
},
}),
theme =>
theme.applyStyles('dark', {
paddingBottom: 3,
[theme.breakpoints.up('md')]: {
width: '90em',
[theme.breakpoints.only('md')]: {
width: theme.breakpoints.values.md,
maxWidth: 'calc(100% - 2em)',
mx: 'auto',
},
[theme.breakpoints.up('lg')]: {
width: theme.breakpoints.values.lg,
},
}),
]}>
@@ -63,10 +66,12 @@ const Section: React.FC<SectionProps> = ({ variant = 'primary', imageUrl, imageA
color="text.secondary"
sx={theme => ({
paddingBottom: 3,
[theme.breakpoints.up('md')]: {
width: '90em',
[theme.breakpoints.only('md')]: {
width: theme.breakpoints.values.md,
maxWidth: 'calc(100% - 4em)',
mx: 'auto',
},
[theme.breakpoints.up('lg')]: {
width: theme.breakpoints.values.lg,
},
})}>
{props.headline}
@@ -78,20 +83,26 @@ const Section: React.FC<SectionProps> = ({ variant = 'primary', imageUrl, imageA
justifyContent: 'center',
[theme.breakpoints.down('md')]: {
minHeight: '60vh',
// minHeight: imageUrl && '60vh',
flexDirection: props.title || props.headline ? 'column' : 'column-reverse',
alignItems: 'align-items',
alignItems: 'center',
gap: 3,
},
[theme.breakpoints.up('md')]: {
[theme.breakpoints.only('md')]: {
mx: 'auto',
width: '90em',
width: theme.breakpoints.values.md,
maxWidth: 'calc(100% - 4em)',
flexDirection: variant === 'primary' ? 'row-reverse' : 'row',
alignItems: 'center',
gap: 5,
},
[theme.breakpoints.up('lg')]: {
mx: 'auto',
width: theme.breakpoints.values.lg,
flexDirection: variant === 'primary' ? 'row-reverse' : 'row',
alignItems: 'center',
gap: 5,
},
})}>
{imageUrl &&
(imageCaption ? (