Element Order and Responsive Design Issues

[ggogarten]

I am trying to create a form but am having some issues when I check the responsiveness on smaller screens. My form has a title for each field and an input below it. When I resize the page the order of elements get’s mixed up and the titles move to the wrong position. Also when I am in the designer everything looks ok but in preview everything is out of place? Any tips on how to properly structure my elements is greatly appreciated.

Designer view, everything in correct place:

Responsive mode, labels and inputs in the wrong place:

Preview mode, nothing is aligned:

Thanks in advance!

[boston85719]

1. put elements on the same line into a group
2. make each element in the group for a line center aligned
3. make sure the group height is 20 or 30px higher than the element position (ie: elements in the group should have y value of 20 or 30)…this makes it so when collapsed and they get pushed to another line below other elements there is a space between them
4. ensure all elements have same settings for fixed width / or max and min widths so they all respond appropriately.
5. put a buffer group between elements in groups to allow the margins between them to collapse to a certain point before they are moved to another line

[ggogarten]

Thank you very much @boston85719! Will try these tonight, I am a complete newbie with Bubble but am having aha moments every 10 minutes when things work . It’s a pleasure to work with and have such an active community helping out.