I am currently utilizing Material ui's Grid
component to organize my user interface elements. Here is the code snippet:
<Grid container spacing={3}>
<Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRight: '1%' }}>
<Grid item xs={7} sm={7} md={7}>
<label className={classes.title}> Title </label>
</Grid>
<Grid item xs={5} sm={5} md={5}>
<label style = {{marginLeft: '25%'}}> Label 1 </label>
<label> Label 2 </label>
</Grid>
</Grid>
In order to achieve a responsive design based on different screen sizes and add breakpoints, how can I implement that in the given code? Additionally, I'm facing an issue with browser resolution/zoom where the design extends beyond the viewport and causes horizontal scrolling. Is there a way to handle this effectively?