I have configured the Grid component to occupy 6 on small/medium screens for a side-by-side layout and 12 on xs screens for each item. While everything looks fine in the computer view, I am facing an issue with the mobile view where the paper component is overflowing outside of the background image at the bottom. *UPDATE It appears that the problem stems from giving the paper component a padding of 5. Is there a more effective way to create space around my text? Does anyone have a solution for this?
import Grid from '@mui/material/Grid';
import React from 'react'
import bitMoji from "../images/bitMoji.png"
import Container from '@mui/material/Container'
import Box from '@mui/material/Box'
import { Typography } from '@mui/material';
import Paper from '@mui/material/Paper';
function About() {
return (
<Container maxWidth="md">
<Grid marginTop={10} container space={2}>
<Grid item xs={12} sm={6} md={6}>
<img style={{
maxWidth: '100%',
height: 'auto'
}} src={bitMoji} alt="" />
</Grid>
<Grid xs={12} sm={6} md={6}>
<Paper sx={{
padding: 5
}} elevation={10}>
<Typography variant="p" component="p">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, sed beatae. Laboriosam perspiciatis molestiae delectus deleniti! Explicabo inventore eius ad veniam rem illo architecto ut, numquam atque officia et quae?
</Typography>
</Paper>
</Grid>
</Grid>
</Container>
)
}
export default About
App.css
height: 100vh;
overscroll-behavior: none;
scroll-behavior: smooth;
background-repeat: no-repeat;
background-image: url('https://images.unsplash.com/photo-1557128928-66e3009291b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');