# Web-App Layout Bug

**URL:** <https://forum.adalo.com/t/web-app-layout-bug/11090>\
**Category:** Design\
**Created:** [April 7, 2021, 3:24am UTC](https://forum.adalo.com/t/web-app-layout-bug/11090 "2021-04-07T03:24:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dominiconorton](https://avatars.discourse-cdn.com/v4/letter/d/8e7dd6/32.png) [@dominiconorton](https://forum.adalo.com/u/dominiconorton)\
**Post date:** [April 7, 2021, 3:24am UTC](https://forum.adalo.com/t/web-app-layout-bug/11090/1 "2021-04-07T03:24:34Z")

</div>

I am making a tutorial upvoting a web app.

The basic layout and logic are there.

When I upvote (and downvote) the layout jumps all over the place.

In the editor, it is designed like this:

 ![Screenshot 2021-04-07 at 04.10.17](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/9/962dd72f08814741bed0cef351e8b3623a35cd8b.png)

When the user has upvoted the arrow turns red.

but in the live version, numbers disappear, grouped elements lose alignment

 ![Screenshot 2021-04-07 at 04.10.31](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/6/64aa6dae9778721bd76ee51020ecc80e5f7f9993.png)

Here is the live version:

> **[Broken Tutorial](https://dominic-nortons-team.adalo.com/broken-tutorial?target=998942e43ce445e7a8ed43cc51862f42&params=%7B%7D)**
>
> Built with Adalo

---

<div class="post-metadata">

**Author:** ![Erik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/erik/32/7849_2.png) [@Erik](https://forum.adalo.com/u/Erik)\
**Post date:** [April 7, 2021, 7:56am UTC](https://forum.adalo.com/t/web-app-layout-bug/11090/2 "2021-04-07T07:56:38Z")

</div>

Hi Dominic,

It’s best to group the items together via cards (put the items in a rectangle and group them together).

If you use the toggle like I showed you in the other post, that’ll help a lot too (as you won’t need two items w/ conditional visibility).

Erik

---

<div class="post-metadata">

**Author:** ![Mitch-Pragmaflow](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/mitch-pragmaflow/32/23179_2.png) [@Mitch-Pragmaflow](https://forum.adalo.com/u/Mitch-Pragmaflow)\
**Post date:** [December 3, 2021, 6:48pm UTC](https://forum.adalo.com/t/web-app-layout-bug/11090/3 "2021-12-03T18:48:46Z")

</div>

Following on what Erik said, here’s a tutorial I just created that shows some of the rectangle technique, and a few others.

[![](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/f/f/ffe0259056e81d10dd11a4fb9206bbabf7cde209.jpeg "Adalo Layout Tutorial [Dec 2021]") ](https://www.youtube.com/watch?v=oM9NwJLNI4c)

---

<div class="post-metadata">

**Author:** ![PaigePalmer](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/paigepalmer/32/13857_2.png) [@PaigePalmer](https://forum.adalo.com/u/PaigePalmer)\
**Post date:** [February 15, 2022, 5:26am UTC](https://forum.adalo.com/t/web-app-layout-bug/11090/4 "2022-02-15T05:26:23Z")

</div>

Hello, Dominic.

It’s recommended to use cards to organise the goods together (put the items in a rectangle and group them together).

It will also help a lot if you use the toggle like I showed you in the other article (since you won’t need two items with conditional visibility).