CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
shayanvalaie
shayanvalaie

Reputation: 61

Paper Component in material UI is overflowing out of background image

I have set the Grid component to take up 6 on small/medium screens so that they are side by side and 12 on xs screens so each item would . I am not having trouble in the computer view but for some reason when I check the mobile view of my website the paper component is overflowing outside of the background image at the bottom. *UPDATE It seems that the problem is that I am giving the paper component a padding of 5. Is there a better way to give my text space around it? Does anyone have a solution to this? enter image description here

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');

}```

Upvotes: 1

Views: 1928

Answers (1)

shayanvalaie
shayanvalaie

Reputation: 61

Seems like a novice solution, but the problem was that the background image I had originally used had too small of a resolution to fit 100vh

Upvotes: 2

Related Questions