https://i.sstatic.net/CIYrE.png
I'm attempting to expand this Grid component to be 100% in width so it fills the entire screen.
Javascript file
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import './CodingTest.css';
const useStyles = makeStyles((theme) => ({
grid: {
height: '100%',
margin: '0px',
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
background: theme.palette.success.light,
height: '100%',
},
}));
export default function CodingTest() {
const classes = useStyles();
return (
<div>
<Grid container className={classes.grid}>
<Grid item xs={12} md={6}>
<Paper className={classes.paper}>1</Paper>
</Grid>
</Grid>
</div>
);
}
In my .css file, I've successfully made the component full width on the right side but there is still some padding remaining on the left, as indicated by the image above.
CSS
* {
min-width: 100%;
}
.MuiContainer-root .MuiContainer-maxWidthLg {
margin: 0px;
padding: 0px;
border: 0px;
min-width: 100%;
}
@media (min-width: 600px) {
.MuiContainer-root .MuiContainer-maxWidthLg {
margin: 0;
padding: 0;
border: 0;
min-width: 100%;
max-width: 100%;
}
}
@media (min-width: 1280px) {
.MuiContainer-root .MuiContainer-maxWidthLg {
margin: 0;
padding: 0;
border: 0;
min-width: 100%;
max-width: 100%;
}
}