How make SharePoint 2019 or Online Modern Communication Sites list view as responsive?

Question

Is it possible to make OOTB SharePoint 2019/Online Modern Communication Sites list view as responsive? I am having a list with 10 columns. Now i am adding this list into my Communication page as List web-part. This is appearing fine in desktop. But if I try to see the same thing in mobile, horizontal scrollbar is coming.

Is there any plugin or ready to use components are available like bootstrap for SharePoint 2019 Modern Communication sites list views.

Answer 1

I Got the Answer on this, Using SharePoint List Formatting help of provided by Microsoft GitHub Repository in JSON Code format, we can make different different types of Modern sites List View as well as responsive view.

https://github.com/SharePoint/sp-dev-list-formatting

Using above code we achieve like below screenshot it's work like champ. now you can style a list or library with JSON using out of the box functionality and create an amazing user experience.
For details describes https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#detailed-syntax-reference

If any issues and guidance need related this ping me I'll guide you how we can use this in list. by the way it's very sample.

Answer 2

I had to create my own custom view using SPFX(Reactjs) to achieve this.

Answer 3

It's by design. You can force it to be responsive but I guarantee it won't work as you expect because there are too many columns. Leave it as is.