How to make responsive content with React and Material UI? - html

Question

I'm designing a product detail page with React and Material UI. I tried to make the page responsive. But the description section keeps overlapping over the image until the screen is reduced to the mobile size. The content gets stacked at that point, but the images and text are not adjusting to the screen size.
I feel like it's something wrong with the image styling. How do I get the images to be responsive?
Here's my code
styling section
const useStyles = makeStyles((theme) => ({
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
toolbar: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
},
}));
function
export default function ProductDetails() {
const classes = useStyles();
return (
<main className={classes.content}>
<div className={classes.toolbar} />
<Grid container spacing={3}> {/* image and description container */}
<Grid item xs={12} sm={6}> {/* image container */}
<Grid> {/* preview image */}
<img src="luxury-watch.jpg" width="600" id="preview" alt="" />
</Grid>
<Grid> {/* sub images */}
<img src="luxury-watch.jpg" width="140" id="img1" alt="" />
<img src="luxury-watch.jpg" width="140" id="img2" alt="" />
<img src="luxury-watch.jpg" width="140" id="img3" alt="" />
<img src="luxury-watch.jpg" width="140" id="img4" alt="" />
</Grid>
</Grid>
<Grid item xs={12} sm={6}> {/* description container */}
<div>
<h1>ROLEX</h1>
<p> .... </p>
<h2><span><sup>$</sup></span>1250</h2>
<Button variant="contained" color="secondary">ADD TO CART</Button>
</div>
</Grid>
</Grid>
</main>
);
}

Answer 1

I think you've missed a few props on your Grid elements. Try this:
export default function ProductDetails() {
const classes = useStyles();
return (
<main className={classes.content}>
<div className={classes.toolbar} />
<Grid container spacing={3}> {/* image and description container */}
<Grid item container xs={12} sm={6}> {/* image container */}
<Grid item> {/* preview image */}
<img src="luxury-watch.jpg" width="600" id="preview" alt="" />
</Grid>
<Grid item> {/* sub images */}
<img src="luxury-watch.jpg" width="140" id="img1" alt="" />
<img src="luxury-watch.jpg" width="140" id="img2" alt="" />
<img src="luxury-watch.jpg" width="140" id="img3" alt="" />
<img src="luxury-watch.jpg" width="140" id="img4" alt="" />
</Grid>
</Grid>
<Grid item container xs={12} sm={6}> {/* description container */}
<div>
<h1>ROLEX</h1>
<p> .... </p>
<h2><span><sup>$</sup></span>1250</h2>
<Button variant="contained" color="secondary">ADD TO CART</Button>
</div>
</Grid>
</Grid>
</main>
);
}
You can't apply xs attribute if your Grid items isn't a container and you console should be warning you about that too

Answer 2

You can use material ui breakpoints for responsiveness
const useStyles = makeStyles((theme) => ({
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
toolbar: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
[theme.breakpoints.down('lg')]:{
width:'60%',
},
[theme.breakpoints.up('lg')]:{
width:'60%',
}
}
}));