Layout is mess up on preview

Im trying to create a test form but when i preview it’s a mess.
Here’s a video

Not sure what to do…

Thanks

Control click to select all of the elements and right click: group these elements in a group. Make that group fixed width, Then center the group on the page, now elements should stay in line when you go into preview mode.

Feel free to register on my site for Bubble related tutorials and tricks to help you.

This channel also contains more in depth Bubble video tutorials
https://www.youtube.com/channel/UCPbXMT2lTaJFfMDmLgHhXkA

Hope that helps,
Evan)

That’s it! Thanks!

But now its a mess on mobile version. lol
Do you have tutorials on this to make it look better on mobile also?

For mobile version you can copy the current page, and then design the elements on a smaller design area about the size of a tablet screen

When you view the popup of the current page by double clicking on the page, select mobile version and specify the the new page you created

Now for the elements on the screen that is iPad size, you can remove fixed width constraint and set minimum width on elements instead of for example 40 - 50 %, if elements are not staying in line the way you want them to, try grouping those elements together or moving them a bit farther apart

Hope that helps )

1 Like