# Web version elements moving

**URL:** <https://forum.adalo.com/t/web-version-elements-moving/10990>\
**Category:** Get Help\
**Created:** [April 5, 2021, 7:36am UTC](https://forum.adalo.com/t/web-version-elements-moving/10990 "2021-04-05T07:36:53Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![vwijwessel](https://avatars.discourse-cdn.com/v4/letter/v/e68b1a/32.png) [@vwijwessel](https://forum.adalo.com/u/vwijwessel)\
**Post date:** [April 5, 2021, 7:36am UTC](https://forum.adalo.com/t/web-version-elements-moving/10990/1 "2021-04-05T07:36:53Z")

</div>

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.

 ![Schermafbeelding 2021-04-05 om 09.30.53](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/3/34025312cf7cae06f60749eb285d9899785cbb36.png) ![Schermafbeelding 2021-04-05 om 09.35.41](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/d/dfb1195aed98e4953837649f07578916b285d1ec.png) ![Schermafbeelding 2021-04-05 om 09.31.02](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/7/711bdff486b7a95b3dabe00befaa154a4578c215.png) ![Schermafbeelding 2021-04-05 om 09.31.10](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/6/6ba83be76b40cc1244f0a93a7189ae3e28fde3e3.png)

---

<div class="post-metadata">

**Author:** ![B0untiful\_26](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@B0untiful\_26](https://forum.adalo.com/u/B0untiful_26)\
**Post date:** [April 5, 2021, 5:59pm UTC](https://forum.adalo.com/t/web-version-elements-moving/10990/2 "2021-04-05T17:59:10Z")

</div>

Adalo isnt is responsive on the web-app version! Quite disappointed, but we will have to wait until they make it work.

---

<div class="post-metadata">

**Author:** ![vwijwessel](https://avatars.discourse-cdn.com/v4/letter/v/e68b1a/32.png) [@vwijwessel](https://forum.adalo.com/u/vwijwessel)\
**Post date:** [April 5, 2021, 6:31pm UTC](https://forum.adalo.com/t/web-version-elements-moving/10990/3 "2021-04-05T18:31:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![B0untiful\_26](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@B0untiful\_26](https://forum.adalo.com/u/B0untiful_26)\
**Post date:** [April 5, 2021, 7:28pm UTC](https://forum.adalo.com/t/web-version-elements-moving/10990/4 "2021-04-05T19:28:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vwijwessel](https://avatars.discourse-cdn.com/v4/letter/v/e68b1a/32.png) [@vwijwessel](https://forum.adalo.com/u/vwijwessel)\
**Post date:** [April 5, 2021, 7:44pm UTC](https://forum.adalo.com/t/web-version-elements-moving/10990/5 "2021-04-05T19:44:35Z")

</div>

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. 🤔

---

<div class="post-metadata">

**Author:** ![AddyEdwin](https://avatars.discourse-cdn.com/v4/letter/a/f0a364/32.png) [@AddyEdwin](https://forum.adalo.com/u/AddyEdwin)\
**Post date:** [April 5, 2021, 7:57pm UTC](https://forum.adalo.com/t/web-version-elements-moving/10990/6 "2021-04-05T19:57:02Z")

</div>

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](https://forum.adalo.com/t/screen-dimensions/8259)  
[Responsive WebApp Screensize - Help - Adalo](https://forum.adalo.com/t/responsive-webapp-screensize/2147)  
Amazing YouTube video: [Adalo experiments: rectangle responsiveness - YouTube](https://www.youtube.com/watch?v=KjlsQ3sPAWM)

---

<div class="post-metadata">

**Author:** ![vwijwessel](https://avatars.discourse-cdn.com/v4/letter/v/e68b1a/32.png) [@vwijwessel](https://forum.adalo.com/u/vwijwessel)\
**Post date:** [April 6, 2021, 8:31am UTC](https://forum.adalo.com/t/web-version-elements-moving/10990/7 "2021-04-06T08:31:55Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![AddyEdwin](https://avatars.discourse-cdn.com/v4/letter/a/f0a364/32.png) [@AddyEdwin](https://forum.adalo.com/u/AddyEdwin)\
**Post date:** [April 6, 2021, 8:43am UTC](https://forum.adalo.com/t/web-version-elements-moving/10990/8 "2021-04-06T08:43:52Z")

</div>

Wow, never thought of that. I’ll try that out myself!

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/system/32/40401_2.png) [@system](https://forum.adalo.com/u/system)\
**Post date:** [April 16, 2021, 8:44am UTC](https://forum.adalo.com/t/web-version-elements-moving/10990/9 "2021-04-16T08:44:23Z")

</div>

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