# React - Responsive cards

**URL:** <https://forum.kirupa.com/t/react-responsive-cards/639358>\
**Category:** web dev\
**Created:** [February 1, 2019, 7:08am UTC](https://forum.kirupa.com/t/react-responsive-cards/639358 "2019-02-01T07:08:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ambily\_Cheriyan](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@Ambily\_Cheriyan](https://forum.kirupa.com/u/Ambily_Cheriyan)\
**Post date:** [February 1, 2019, 7:08am UTC](https://forum.kirupa.com/t/react-responsive-cards/639358/1 "2019-02-01T07:08:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [February 1, 2019, 7:52am UTC](https://forum.kirupa.com/t/react-responsive-cards/639358/2 "2019-02-01T07:52:01Z")

</div>

Can you post a link to your example?

---

<div class="post-metadata">

**Author:** ![Ambily\_Cheriyan](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@Ambily\_Cheriyan](https://forum.kirupa.com/u/Ambily_Cheriyan)\
**Post date:** [February 1, 2019, 8:37am UTC](https://forum.kirupa.com/t/react-responsive-cards/639358/3 "2019-02-01T08:37:00Z")

</div>

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>
```