Making the card component responsive using material ui

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