Web-App Layout Bug

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:

When the user has upvoted the arrow turns red.

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

Here is the live version:

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

2 Likes

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

2 Likes

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