How to make responsive web app

Hi there,

I almost finished the web app in terms of functionalities but I’m stuck with a major issue regarding responsiveness. Like there is literally no mobile view :frowning:. I would expect basic stuff like rows being responsive and stack as the screen shrink but this is not happening. Any tips on how to make a web app responsive?

Not even staying within the screen

Hey,

Yes switching between full screen and mobile view on the view canvas is a bit awkward at the moment as the contents do not respond to the change. The best way to see the actual results would be to use web preview and the preview app to compare how the app looks like on the web vs in mobile.

I’m not sure how you’ve built your app, but as for adding mobile responsiveness here’s a couple of suggestions (maybe you already have some of these but I’ll list them anyway):

  • Using percentages and formulas for setting the width and height of components (instead of static pixels)

  • Checking with a formula if the user is using a mobile device and change stylings according to that

  • Using scrollview with horizontal scroll so tables etc can be viewed on mobile

  • Using containers with layout horizontal instead of rows, so the mobile would render them as a vertical list instead of rows

But yes, we definitely should make an effort on clarifying how web responsiveness can be achieved!

1 Like

Thanks a lot wil follow your suggestions