Web version elements moving

Here’s what I did - I first changed the screen size for each screen (click on the Screen, then “Edit styles” at the bottom of the right panel) to 2560 x 1440. Why? Because I found that some of my users will use this resolution. Then everytime I’m making a screen, I’m using Chrome/Edge’s developer tools settings to check how the app looks in 1366 x 768 (most common laptop screen resolution), 1920 x 1080, and 2560 x 1440.

I use simple rectangles from the components to group and align things. It’s a lot of trial and error, so yeah. But I found that a elements within the width of 1300 stays that way in all the screen sizes, so for the majority of my pages I made sure that all my elements width combined stays at exactly 1300. I use a lot of boxes between each element to make sure that the gaps between the elements stay that way in different screen sizes.

Also, you should search this forum for similar topics. Some users have really helpful tips and videos on how responsiveness works currently. It’s a pain, but if you’re patient you can get things to look correctly in any screen size (as long as its on desktop)

Screen dimensions - Help / Design - Adalo
Responsive WebApp Screensize - Help - Adalo
Amazing YouTube video: Adalo experiments: rectangle responsiveness - YouTube