Layout is mess up on preview

kojakeugenio · 2020-05-19T18:09:03.589Z

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

drive.google.com

2020-05-20_02-06-34.mp4 (video)

Google Drive file.

Not sure what to do…

Thanks

253digital · 2020-05-19T18:12:43.737Z

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.

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

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

Hope that helps,
Evan)

kojakeugenio · 2020-05-19T18:22:45.037Z

That’s it! Thanks!

kojakeugenio · 2020-05-19T19:01:12.518Z

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

253digital · 2020-05-19T19:42:18.057Z

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 )