For my current project, I am working on designing a product detail page using React and Material UI. The challenge I am facing is ensuring that the page remains responsive across different screen sizes. Specifically, I am struggling with the description section overlapping the image until the screen size is reduced to mobile dimensions. Even when the content gets stacked properly, the images and text are not adjusting as expected.
I suspect that there might be an issue with the styling of the images. How can I make sure that the images are responsive and adapt to varying screen sizes?
Below is a snippet of my code for reference:
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>
);
}