Making the card component responsive using material ui - css

Question

I am trying to make my card responsive to mobile applications
const styles = {
edit: {
width: "40%",
marginLeft: 270,
background: "#76ff03"
},
add: {
width: "100%",
background: "#18ffff",
size: "large"
},
root: {
minHeight: 210,
minWidth: 100
}
};
<Container maxWidth="md">
{/*marginTop:15*/}
<Typography component="div" style={{ borderColor:'#00c853' }}>
{/*style={{ height: '30vh' }}*/}
<Card style={styles.root}>
<Typography variant="overline" color="secondary" style={{fontFamily:'Roboto',margin:10}}>
All about your needs
</Typography>
<form onSubmit={this.validateItem} autoComplete='off'>
<TextField id="outlined-full-width" label="Input" style={{ width:'90%',marginTop:30 ,marginLeft:40 }}
placeholder="Add A Todo Item " margin="normal" InputLabelProps={{
shrink: true,
}} error={this.state.errorState} helperText={ this.state.errorState
&& "Item name can't be blank" } size="large" variant="outlined" value={newItem} onChange={handleInput} />
<Grid container justify='center' alignContent='center'>
<Grid item xs={12} md={6}>
{buttonChange()}
</Grid>
</Grid>
</form>
</Card>
</Typography>
</Container>
</div>
The above code is the user interface for the card component , i am trying to make the card component mobile responsive , but the interface i get instead is given below
The card and the text field should be able to be responsive to the screen size, but i am unable to make it work. Is there a way i can make it happen?

Answer 1

Hello and thank you for asking your question,
you can use the breakpoint of [theme.breakpoints.down("(XS, sm,md, lg, xl,)")] : {
maxWidth: 200 // you can change the size of your card component.
}
Here is a clearer example from the material ui Card component
Here is the component from the material UI Card component page, I only added the useTheme and useMediaQuery imports, and added a medium breakpoint inside useStyle under classes.root Here is a useful link on "useMediaQuery" https://material-ui.com/components/use-media-query/#usemediaquery
import { useTheme } from "#material-ui/styles";
import useMediaQuery from "#material-ui/core/useMediaQuery";
const useStyles = makeStyles(theme => ({
root: {
maxWidth: 345,
[theme.breakpoints.down("md")] : {
maxWidth: 200
}
},
media: {
height: 140
}
}));
const Card = () => {
const classes = useStyles();
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up("sm"));
return (
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
Hope this helps