Hello,
Me and my team have made a few web- and native apps. Amazing software!
Now, we’d like to have a website-version of a particular app. Upon building it, we ran into a problem: parts seem to be moved once we check the live version. We tried grouping several elements in order to keep them together, but it doesn’t do anything. Does anyone know what might cause this aka what might fix this?
Best regards,
Wessel
Some images added to demonstrate.
Adalo isnt is responsive on the web-app version! Quite disappointed, but we will have to wait until they make it work.
Hmmm shame 
what is the point of a website option then.
Still. I see some Adalo web-app examples on this forum with elements that seems to be aligned properly? How do they make that?
Either use invisible boxes to be aligned, or any other trick to make it work, but if you look at phone view it will be all misaligned except if you use any sort of web app to phone app like what mfork did.
Phone users will be using de web-app or native app we have, so that’s no problem. Making this purely for the laptop/pc users (also on a other hyperlink).
How can I user invisible boxes to align content? I grouped content and that doesn’t seem to work, even if elements fill the entire screen (border-border). Content still randomly moves as showed in screenshots. 
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
Thanks! Very helpful. I ended up finding a simple fix, using your info:
I simply add a transparant rectangle as background (filling the entire background). Then (re-)add the elements over it. They all stick in the correct position 
Thanks once again!
Wow, never thought of that. I’ll try that out myself!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
