How do I style my web app? Page width, etc

My app is almost finished, and now I’ve started building my web app.

My first step was to copy the home screen from the app to the web app.

In the web app, the screen shows a width of 375 (the same as the same screen in the app), but in preview it stretches across the entire width of my desktop screen.

Is this normal, and is there a way to control the layout for a larger screen? In a normal website I would do this with html and css. Is there an Adalo equivalent?

I haven’t built a DWA with Adalo yet but what I do know is that it’s not responsive and what the users will view is defined by the size and position of each element.

I know there’s an HTML component floating around, but I haven’t seen one for CSS. And I don’t know how far the HTML component can go.

If my memory does not fail me, I believe I read/heard that Adalo is working on making DWA responsive, or to provide a solution so that we can control it better.

2 Likes

Yes, this is normal.

The best way to do it is to copy and paste your app screens into the PWA app and then resize the screens to be larger in the PWA (Like 1200px by 800px).

Adalo is not “responsive” and you cannot add custom CSS to make it responsive. It’s ideal to create separate screens for different devices and to use the “Device Detector” component to direct your users to the proper screen based on their browser window sizes.

Good info.

How reliable is the device detector component? Any idea?

Works well. I use it on all my PWAs

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.