Screen dimensions

So this may be a silly question, but is there anywhere in the UI that shows the dimensions of individual screens? I’m new to Adalo and can see how to re-size them, but I don’t have any idea contextually how big a screen is. I’m used to responsive design breakpoints but not sure how it translates here.

Can I control how it looks on a large iMac vs. laptop vs. iPad vs. phone? Thanks for any advice you can provide.

  1. Click on the name of the screen on the editor (in this example screenshot it is called ‘Welcome Not Logged in’)

  2. Click ‘edit styles’ at the bottom of the left hand menu

  3. This will show you the screen dimensions

With Adalo it scales itself to some extent. Layouts can be tricky to figure out. But for example if you are dragging a component and the center guidelines shows up - drop it there and it will be centered.

I am a fan of centering items to help them look good on different screen sizes. At the moment it can be difficult to make Adalo layouts look good on large screen sizes.


This is extremely helpful, thank you! I knew I was missing something :+1:t4:

I’ve been messing around with design in Adalo web apps and have noticed the auto scaling behaviour and how to combat it when needed, but I found it best setting all my screen sizes to 1920x1080, designing stuff on my computer, then previewing them on my laptop that doesn’t have a very wide screen to see what it would be like for someone using it on a laptop.

Then when viewing on wider screens, it just pushes the content out to the sides and adds some extra white space in the middle, if that makes sense.

At the moment it seems to be best to set screen dimensions large and then view on a small device (or multiple in between if you have them) to see scale behaviour.

1 Like