How to make reactjs website responsive using material-ui

Question

I am working on reactjs project using material-ui. Web-page is working perfect on desktop layout but when I switch layout to responsive (mobile). Than all the text and images merge in eachother. My question is this that how can I make my site responsive. Below is the code snippet with its layout image.

const useStyles = makeStyles((theme) => ({
  main: {
    width: "100%",
    minWidth: "100%",
  },
  grid1: {
    height: "100vh",
    minWidth: "100%",
    //backgroundImage: `url(${img1})`,
    backgroundColor: "khaki",
    display: "flex",
    flexDirection: "column",
    flexWrap: "wrap",
  },
  img1: {
    backgroundSize: "contain",
    backgroundRepeat: "no-repeat",
    height: "100%",
    width: "100%",
    zIndex: "0",
    position: "relative",
    opacity: "0.7",
  },
  font1: {
    zIndex: "1",
    fontFamily: "Crimson-Text",
    fontWeight: "bold",
    fontSize: "350%",
    position: "absolute",
    left: "30%",
    top: "40%",
    color: "white",
  },
  font2: {
    zIndex: "1",
    fontFamily: "Crimson-Text",
    fontWeight: "bold",
    fontSize: "150%",
    position: "absolute",
    left: "40%",
    top: "53%",
    color: "white",
  },
  btn1: {
    zIndex: "1",
    fontFamily: "Crimson-Text",
    fontWeight: "bold",
    //fontSize: "150%",
    position: "absolute",
    left: "35%",
    bottom: "20%",
    color: "inherit",
    variant: "outlined",
    borderRadius: "1px",
    background: "white",
    "&:hover": { color: "inherit", variant: "contain", background: "grey" },
  },
  btn2: {
    zIndex: "1",
    fontFamily: "Crimson-Text",
    fontWeight: "bold",
    //fontSize: "150%",
    position: "absolute",
    left: "50%",
    bottom: "20%",
    color: "inherit",
    variant: "outlined",
    borderRadius: "1px",
    background: "white",
    "&:hover": { color: "inherit", variant: "contain", background: "grey" },
  },
}));

const Home = () => {
  const classes = useStyles();
  return (
    <Grid container xs={12} sm={12}>
      <Grid item xs={12} sm={12} className={classes.grid1}>
        <img src={img1} className={classes.img1} alt="home1" />
        <Typography className={classes.font1}>Shoes made from wool</Typography>
        <Typography className={classes.font2}>Now in new colors</Typography>
        <Button className={classes.btn1}>Shop Men</Button>
        <Button className={classes.btn2}>Shop Women</Button>
      </Grid>
  );
};

export default Home;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

you can change here:

main: {
    display:'flex',
    width: "100%",
    minWidth: "100%",
  }, 

and in the grid side:

<Grid container spacing={3}>
      <Grid item item xs={12} sm={6} className={classes.grid1}>/*or you an use item xs={6} sm={3}*/
        <img src={img1} className={classes.img1} alt="home1" />
        <Typography className={classes.font1}>Shoes made from wool</Typography>
        <Typography className={classes.font2}>Now in new colors</Typography>
        <Button className={classes.btn1}>Shop Men</Button>
        <Button className={classes.btn2}>Shop Women</Button>
      </Grid>
 

for better understanding you should follow that link

you can arrange your grid any way you want when you try to squeeze the browser. it will make it responsive for various size of screens