I've been working on a reactjs project with material-ui, and everything looks great on desktop. However, when I switch to the mobile layout, all the text and images start overlapping. I'm wondering how I can make my site responsive. Below you'll find the code snippet along with an image of the layout.
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>