# Layout is mess up on preview

**URL:** <https://forum.bubble.io/t/layout-is-mess-up-on-preview/92623>\
**Category:** Responsiveness\
**Created:** [May 19, 2020, 6:09pm UTC](https://forum.bubble.io/t/layout-is-mess-up-on-preview/92623 "2020-05-19T18:09:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kojakeugenio](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kojakeugenio/32/61274_2.png) [@kojakeugenio](https://forum.bubble.io/u/kojakeugenio)\
**Post date:** [May 19, 2020, 6:09pm UTC](https://forum.bubble.io/t/layout-is-mess-up-on-preview/92623/1 "2020-05-19T18:09:03Z")

</div>

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

> **[2020-05-20\_02-06-34.mp4 (video)](https://drive.google.com/file/d/1XTVKokzb2rlh6wqgrQjr-cF_ACI1iIF3/view?usp=drivesdk)**
>
> Google Drive file.

Not sure what to do…

Thanks

---

<div class="post-metadata">

**Author:** ![253digital](https://avatars.discourse-cdn.com/v4/letter/2/8edcca/32.png) [@253digital](https://forum.bubble.io/u/253digital)\
**Post date:** [May 19, 2020, 6:12pm UTC](https://forum.bubble.io/t/layout-is-mess-up-on-preview/92623/2 "2020-05-19T18:12:43Z")

</div>

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 - Visual Programming](https://newagedevelopment.bubbleapps.io/signup-login)**
>
> 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](https://www.youtube.com/channel/UCPbXMT2lTaJFfMDmLgHhXkA)

Hope that helps,  
Evan)

---

<div class="post-metadata">

**Author:** ![kojakeugenio](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kojakeugenio/32/61274_2.png) [@kojakeugenio](https://forum.bubble.io/u/kojakeugenio)\
**Post date:** [May 19, 2020, 6:22pm UTC](https://forum.bubble.io/t/layout-is-mess-up-on-preview/92623/3 "2020-05-19T18:22:45Z")

</div>

That’s it! Thanks!

---

<div class="post-metadata">

**Author:** ![kojakeugenio](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kojakeugenio/32/61274_2.png) [@kojakeugenio](https://forum.bubble.io/u/kojakeugenio)\
**Post date:** [May 19, 2020, 7:01pm UTC](https://forum.bubble.io/t/layout-is-mess-up-on-preview/92623/4 "2020-05-19T19:01:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![253digital](https://avatars.discourse-cdn.com/v4/letter/2/8edcca/32.png) [@253digital](https://forum.bubble.io/u/253digital)\
**Post date:** [May 19, 2020, 7:42pm UTC](https://forum.bubble.io/t/layout-is-mess-up-on-preview/92623/5 "2020-05-19T19:42:18Z")

</div>

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 )