# How to make data grid element mobile responsive?

**URL:** <https://community.weweb.io/t/how-to-make-data-grid-element-mobile-responsive/3367>\
**Category:** How do I?\
**Created:** [July 5, 2023, 6:39am UTC](https://community.weweb.io/t/how-to-make-data-grid-element-mobile-responsive/3367 "2023-07-05T06:39:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [July 5, 2023, 6:39am UTC](https://community.weweb.io/t/how-to-make-data-grid-element-mobile-responsive/3367/1 "2023-07-05T06:39:17Z")

</div>

Hey! I have a data grid element that looks nice on desktop / tablet but not on mobile.

It looks like that currently:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/314b1b2b5dd751cf0b452536685dd7cecb2a7a0b.png)

Is there anyway I can get it to look nicer? Ideally, to have everything not squished together. I tried toggling the widths from auto to 100% but doesn’t make a difference.

If set the width of the data grid to be fixed width, i can’t scroll left and right, and if I change the overflow to “scroll” or “auto”, the table is no longer mobile responsive:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/08ef4e4984fff41cf5f15cdb7e9c0268296eb448.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/61b57fc5e22cbaff2925ad048c37ce00a96a607e.png)

Also, how do I wrap the text for a particular column? Right now it cuts off the text even on desktop.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/936e04a16c339f0961433e24b3a54e0202ebff7e.png)

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [July 5, 2023, 7:43am UTC](https://community.weweb.io/t/how-to-make-data-grid-element-mobile-responsive/3367/2 "2023-07-05T07:43:47Z")

</div>

There is not a single answer for mobile grid/table view.  
Aurelie talks about this [here](https://community.weweb.io/t/rsponsive-design-for-the-table-element/2172/3).  
[This blog post](https://uxdesign.cc/designing-a-complex-table-for-mobile-consumption-nom-7472f7b11fe6) is a very interesting read on the subject.