My website consists of three main elements: pictures, Cards (containing pictures and various typography), and Buttons. These elements are arranged in a column layout.
The issue I am facing is that the pictures and buttons get cut off on the screen due to resolution constraints. How can I ensure that all three elements fit perfectly within the page without being cut off?
This is the desired outcome: https://i.stack.imgur.com/y0t4k.png
The current problem is that the pictures and buttons are not fully visible. https://i.stack.imgur.com/cTxxF.png
Below is the code snippet I am using:
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: "100%",
height: "100%",
overflow: 'auto',
}}
>
<Grid
container
direction="column"
alignItems="center"
>
<Grid item>
<CardMedia
component="img"
image="logo.png"
alt="logo"
sx={{
width: { xs: '80%', sm: '100%', md: '100%', lg: '100%', xl: '100%' }
}}
style={{ margin: '0 auto' }}
/>
</Grid>
</Grid>
<Grid container direction="row" justifyContent="center">
<Grid item xs={9} sm={8.6} md={6} lg={5} xl={4}>
<Card
sx={{
backgroundColor: 'white',
borderRadius: '4px'
}}
>
<Box
sx={{mt:4, mb:4, mx:4}}
>
<Box>
<Stack
direction={{xs: "column", sm: "row"}}
alignItems={{xs: "center", sm: "flex-start"}}
justifyContent={{xs: "center", sm: "flex-start"}}
spacing={{ xs: 0, sm: 3}}
>
<CardMedia
component="img"
sx={{ width: {xs: 120, sm: 160}, height: {xs: 120, sm: 160} }}
image="image.png"
alt="image"
style={{borderRadius: "6px"}}
/>
<Box
sx={{wordWrap: "break-word", overflow: "hidden"}}
>
<Typography>
.....
</Typography>
<Typography>
.....
</Typography>
</Box>
</Stack>
</Box>
</Box>
<Box
sx={{mx:4, mb: 10, wordWrap: "break-word", overflow: "hidden"}}
>
<Box>
<Typography>
.....
</Typography>
<Typography>
.....
</Typography>
</Box>
<Box
sx={{mt:2}}
>
<Typography>
.....
</Typography>
<Typography>
.....
</Typography>
</Box>
</Box>
</Card>
</Grid>
</Grid>
<Grid container direction="row" justifyContent="center">
<Grid item xs={9} sm={8.6} md={6} lg={5} xl={4}>
<Button
onClick={() => setStep(2)}
>
Next
</Button>
</Grid>
</Grid>
</Box>