Simple layout getting broken on preview -- absolute positioning is lost

[brenton.strine]

I have a pretty simple layout:

But the elements reposition when I load it:

It’s not a complicated setup at all. No repeating groups, just some form items in a group in a group.

What is odd is that when looking at the source code, somehow the text inputs have been grouped into a div and the image uploader has been grouped into a sister div:

These divs have no positioning on them and since they’re display: block by default, they get displayed on separate lines. But why did that happen? I thought that Bubble used absolute positioning for all items in the layout. Why did all the text inputs get grouped into a div and why did both divs lose their absolute positioning?

[rpetribu]

Hi @brenton.strine

Try to create a group with all your inputs.
Position this group in the left (x = 0).

Group you uploader field in another group.
Position this group in the right, immediately after the other group.

In the responsive tab, align the first one in the left and the second one in the right.

It should fixe it

[brenton.strine]

That fixed it–actually I didn’t even need to open the responsive tab, it worked just when I created two “column” groups.

What I don’t understand is why… how can I learn more about what’s going on in Bubble that makes this sort of thing happen and why making certain changes can fix it.

[rpetribu]

Great!

More you use (and try different things), more you will learn. There are some good videos in youtube as well, you definitely should check it out:

How To Do Responsive Design in Bubble with Gregory John