React - Responsive cards

programming web dev
1

I have material-ui cards on which I have some info and actions. I am trying to make these cards responsive using react-grid-layout. However resize and drag options do not work on these cards. there is no console error though. Any pointers on how I could go forward

2

Can you post a link to your example?

3

My code looks like this:

<div className="divclass">           
  <div className="cont">                
    {store.getState().items.map(item => {
      var layout = [ {i: item.uoid, x: 4, y: 0, w: 1, h: 2}  ];
      return (
            <ReactGridLayout className="layout" layout={layout} cols={3} key={item.uoid} >
              <div key={item.uoid}>
                  <Card className={classes.card} key={item.uoid} style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
                      <div className="cardMediaDiv">
                        <img src={item.category} />
                        <Typography gutterBottom variant="subheading" component="h2">
                          { item.name }
                        </Typography>                                  
                      </div>                                
                  </Card>
              </div>                        
          </ReactGridLayout>
      );
    })} 
  </div>
</div>